码迷,mamicode.com
首页 > Web开发 > 详细

css属性操作

时间:2019-09-10 19:37:02      阅读:114      评论:0      收藏:0      [点我收藏+]

标签:登录   abs   控制   dash   清除浮动   百度   color   大小   z-index   

CSS
属性操作
字体属性
color 字体颜色
font-size 字体大小(24px)
font-weight 字重
font-family 字体样式
文字属性
text-align:center/left/right/justify
text-decoration:none/underline/overline/line-through
text-indent:32px
背景属性
颜色:
red
#4e4e4e
rgb(128,128,128)
rgba(128,128,128,0.5)
backgroud-color
backgroud-image
默认是平铺满这个区域
浏览器窗口可以把它当成一个三维坐标系
横X
竖Y
指向用户的Z
backgroud-repeat:no-repeat/repeat-x/repeat-y
backgroud-position:center center 第一个上下 第二个左右

支持简写
backgroud:red url(‘‘) no-repeat center center

背景图片应用场景
所有浏览器你能够看到的都是走网路请求传输过来的
当你的网站需要用到很多小图标的时候,可以将所有的小图片放在一张
图片上,然后通过背景图片的位置来控制显示哪一个小图片
从而节省加载资源



边框属性
border-style:solid/dotted/dashed
border-color:red
border-width:5px

支持简写
border:3px solid red;

border-top/left/right/bottom



盒子模型
以快递盒为例
margin:外边距(标签与标签之间的距离)
border:边框
padding:内填充 内边距
content:文本内容


margin-top/left/right/bottom


margin:1 2 3 4
padding:1 2 3 4

浮动
float
浮动是脱离文档流的 也不再遵循块儿级独占一行的特点
浮动主要用于页面布局


浮动会带来父标签塌陷的问题


clear 清除浮动带来的影响
clear:left/right/both

.clearfix:after{
content:‘‘
display:block;
clear:both
}
哪里塌陷 就给谁加一个clearfix类属性即可
如果给当前标签加没有效果 那么你可以考虑给目标标签外层
再套一个div 然后给这个新的div加


是否脱离文档流
脱离
1.浮动
2.绝对定位
3.固定定位

不脱离
1.相对定位



定位
所有的标签默认都是静态的static 没有定位一说
要想改变标签位置 需要先改变标签位置状态
position:static

1.相对定位 relative
2.绝对定位 absolute
3.固定定位 fixed

溢出属性
overflow:hidden,scroll,auto





z-index
模态框(百度登录页面)

opacity
透明度

css属性操作

标签:登录   abs   控制   dash   清除浮动   百度   color   大小   z-index   

原文地址:https://www.cnblogs.com/pangqian/p/11502341.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!