css属性操作

Posted 2022-10-13 pangqian

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
透明度