CSS前期了解

Halle！

墨衍会员 · AI 创作全网分发码龄7年

关注

原创最新推荐文章于 2026-09-21 09:15:30 发布 237 阅读 AI 写同款· GEO 优化 ›

CSS 全称指 Cascading Style Sheet 层叠样式表

常用属性及属性值

padding：0 15px；让导航栏各导航之间的间距相等。
line-height： px；px值为该容器所设置的高度。目的是让该内容在该容器里垂直居中。如导航栏在div里垂直居中。text-height本意为定义行高，范围为上边距+字体大小+下边距，默认为上边距=下边距。行高无默认值，随内容变化。
text-align: center; 让内部元素（或行内元素的文字）居中如让div里的p标签文字在div里居中，则<p text-align: center; >。本意指文本对齐方式，值有left( 内容左对齐，当参杂中英文时，效果会更明显)、right、justify（内容平铺容器，间距自动调节）
margin:auto; 让元素本身（或块级元素）水平居中如让div在页面中居中则<div margin:auto;>

CSS的复合样式

复合的写法是通过空格的方式实现的

background：背景色(可省) 背景图片背景图平铺方式位置；如：background： green url(xxx/.xx.png) no-repeat
border: 宽度样式颜色(可省) ；如 border：5px solid black；
font：样式粗细大小/行高字体类型；如 font： italic bold 20px/35px ”微软雅黑“，sans-serif；大小和字体种类不能省略
margin：上右下左；如属性值为3个则代表上左右下。2个时则为上下左右
padding：上右下左；格式完全与margin相同

浏览器默认情况

默认情况下body标签在距离页面的两侧会有一定的空隙，所以会经常使用margin：0px；
浏览器默认字体大小为16px，行高line-height为21px

CSS优先级

行内样式 > ID选择器 > 类选择器 > 标签选择器 > 通用选择器

但是当样式发生冲突的时候，谁的权重值高，谁就生效！权重值对应表：

通用选择器：权重值0
标签（元素）选择器 div、p.... 权重值1
类选择器 .nav .bar..... 权重值10
ID选择器 #btn、#box 权重值100
行内样式权重值1000

可理解为：选择器选择的范围越小越精确，优先级就越高

CSS文本属性

颜色、字体、行高、大小、加粗、倾斜、首行缩进、水平对齐、文字修饰

颜色 color： red；文字颜色
字体 font-family：华文中宋；字体类型（逗号和引号使用）
大小 font-size：26px；字体大小
加粗 font-weight：bold；文字加粗
倾斜 font-style：italic；文字倾斜
首行缩进 text-indent：60px；首行缩进
水平对齐 text-align：center；水平对齐方式（可理解为水平居中）
行高 line-height： 20px；行高（行高值等于高度即可实现垂直居中）

CSS图片

gif格式：支持动画，但是只有全透明和不透明两种模式；只有256种颜色

jpg格式：采用了有损压缩算法，体积较小，不支持透明，不支持动画

png格式：采用无损压缩算法，体积也相对较小，支持背景透明，不支持动画

svg格式：不会失真，记录了图片的形状和颜色，一般用于保存形状和颜色相对简单的图像。

CSS背景图

常用属性：background-repeat：no-repeat；平铺方式 background-position：-5px 100px；背景位置

background-attachment：scroll(相对当前元素偏移)；背景图随滚动条移动的方式，值为fixed(相对浏览器进行偏移 )时，背景图不随滚动条变动

浮动布局

浮动元素会脱离网页文档，与其他元素发生重叠，但是，不会与文字内容发生重叠（即不会遮盖住文字内容，文字会环绕在浮动盒子的周围，可联想到文字环绕效果）
浮动元素float最大的特点是脱离文档流，与其他元素会产生重叠的现象。

用div作浮动布局的时候，浮动div外应该被一个标准流的div包裹，为了后继元素或容器的正常布局。那么此时，父标准流div是必须设置高度的，即使其子浮动元素已经设置了大小，但是在浮动布局里父标准流div并不像普通div那样被子元素撑开，注意此时的父标准流div高度为0，因此需要设置高度。

方法二为：为父标准流div设置 overflow：auto； overflow表示溢出的意思，即对超出边界的元素（注意浮动子元素的顶部会超过标准流父元素的默认高度0），因此父元素可做高度的自由调整，调整大小结果为随浮动子元素的高度变化

方法三为：清除浮动 clear：left/right/both 指当前元素不受前面浮动元素的影响，值为left时指不受左浮动的影响，一般都取值为both

浮动元素在排列时，只参考前一个元素位置即可。可理解为，只参照前一个元素的位置大小高度，紧跟在前一个元素的底部排列
浮动元素的重叠问题：1.浮动元素不会覆盖文字内容，即前面的文字环绕效果。 2.浮动元素不会覆盖图片内容。（因为图片本身也属于文本，可以把图片看做是一个特殊的文字） 3.浮动元素不会覆盖表单元素（输入框、单选按钮、复选框、下拉选项等）

盒子模型

网页上的所有元素，哪怕是文字也是有大小的，除了元素本身的大小，还可以设置它的边框等。还可以给它设置边距，一旦给它设置边距，那么它周围的元素则无法靠近它，从而产生了距离，导航栏各导航间的相等距离就是采用了padding。若是图片间的相等间距采用的是margin。在盒子里包含本身的内容部分、填充部分、边框、边距。

padding：内边距也可认为是填充，即设置了内边距后，元素会被撑开，即元素的实际大小会变大，内容距离边框的padding距离

margin：即盒子与盒子之间的距离。

注意:1.背景色填充到magin以内的区域（不包括margin区域，包括border）2.padding不能为负数，而margin可以为负数3.文字始终在content内