目录

一、基础认识

二、选择器

三、字体和文字样式

四、背景相关属性

五、元素的显示模式

六、css特性

1.继承性

2.层叠性

3.优先性

七、盒子模型

盒子模型的组成部分：

清除元素默认的内外边距：

让盒子水平居中：

外边距合并现象：

八、结构伪类选择器

九、伪元素

十、浮动

小米布局：

网页导航案例 ：

十一、定位

相对定位

绝对定位

让盒子水平居中的案例（子绝父相）

固定定位

元素层级关系：

#博学谷IT学习技术支持#

一、基础认识

css的中文又叫做：层叠样式表。

语法：选择器 + {属性名： 属性值}、

css引入方式：1.内嵌式，写在style标签中。通常放在head中。2.行内式：写在style标签中，写在标签中。3.外联式：单独写一个css文件，通过link把该文件引入。

二、选择器 选择器在html中写法在css中写法标签选择器就是标签本身

div{

?}

类选择器class= "banner".banner { }id选择器id = “wrapper”#wrapper { }通配符选择器无

* {

}

此外还有：后代选择器、子代选择器、交集选择器、并列（兄弟）选择器、伪类选择器。

三、字体和文字样式 字体样式css属性属性值大小font-size数字+px粗细font-weight数字/英文是否倾斜font-stylenormal/italic字体系列font-family文字颜色color英文/#333/rgba()行高line-height数字/数字+px文本缩进text-indent数字+px/数字+em水平居中text-alignleft/right/center文本修饰 text-decoration 一般用none 四、背景相关属性

1.背景颜色

属性名：background-color，值可以写 ：例子：red/#fff/rgba(0,0,0,0)

2.背景图片

属性名：background-image

属性值：ul(加入图片的连接)

3.背景平铺

属性名：background-repeat

属性值：

repeat默认值，水平和垂直方向都平埔no-repeat不平铺repeat-x沿着水平方向平铺repeat-y沿着垂直方向平铺

4.背景位置

属性名：

background-position

属性值：水平方向 垂直方向；

可以使用方位名词，例如：right top;表示右上

可以使用坐标系 ：0 0；表示盒子的左上角

5.背景相关属性连写方式

属性值：background

属性值：color image repeat position

五、元素的显示模式

元素一共有三种显示模式：

第一种，行内元素 ：a、span 、b、u、i、s、strong、ins、em、del……

第二种：块级元素? ：div、p、h系列、ul、li、dl、dt、dd、form、header、nav、footer……

第三种：行内块元素? ?：input、textarea、button、select……

元素模式转换：

属性名 ：display

属性值：

inline :转换成行内元素；

block：转换成块级元素；

inline-block :转换成行内块元素。

六、css特性 1.继承性

子元素继承父元素的相关属性

像文字全部属性子元素都可以继承

但元素如果有浏览器默认的样式，继承就会失效。

例如:? ?a标签的颜色不可以继承；h系列的标签字体大小不可以继承。

2.层叠性

当给一个标签的属性设置了不同的值时，浏览器工作方式是从上往下进行，所以落在最后的值会生效。

3.优先性 继承 < 通配符选择器 < 标签选择器 < 类选择器 < id选择器 < 行内样式 < !important 七、盒子模型 盒子模型的组成部分：

内容部分 ：content? ? ? ?设置宽高

内边距：padding? ? ? ? ? ?在内容与边框之间的边距

边框：border? ? ? ? ? ? ? ? ? 盒子周围

外边距 ：margin? ? ? ? ? ? ?边框以外的边距

设置? ? ??内容区域：

width : 100px;

height :100px;

设置边框：

border : solid? ?10px? ?#333;

此时盒子的大小会变大，宽? =? ?width +? ?左右边框? ?=120px? ；高? ?=? ? height? ? +? ? ?上下边框 =120px;

设置内边距：

padding : 20px 20px 20px 20px;

这四个值分别表示：上? ?右? ?下? ? 左? ? ? 边距

此时盒子的大小也会变化·，具体大小不予计算。

设置外边距：

margin :? ?10px? 10px? 10px? 10px;

这四个值分别表示：上? ?右? ?下? ? 左? ? ? 边距

注意： CSS3中，给出一个属性 ：

box-sizing? ?:? ? border-box

只要给出了宽和高，设置边框和内边距都不会影响盒子的大小。

清除元素默认的内外边距：

比较通用的写法：

*? {

margin ： 0；

padding? ： 0；

}

让盒子水平居中：

margin : 0? auto? ;

外边距合并现象：

对于两个垂直的块级元素，设定上下margin值时，外边距会合并，计算的时候按照外边距大的计算。

外边距塌陷现象：互相嵌套 的 块级元素，子元素的 margin-top 会作用在父元素上，导致父元素一起往下移动 ，解决变法：

1. 给父元素设置border-top 或者 padding-top（分隔父子元素的margin-top） 2. 给父元素设置overflow：hidden 3. 转换成行内块元素 4. 设置浮动 八、结构伪类选择器 选择器说明E：first-child ()选出E元素的第一个子元素E：last-child ()选出E元素的最后一个子元素E：nth-child (n)n可以取1，2，3....，n=1,选取E元素的第一个子元素E：nth-last-child (n)n=5,选取E元素倒数第5个子元素

说明：

对于 ：? ?nth-child(n)

里面的n可以去n,2n,2n+1,odd,-n+5..................

取4n表示：选取父元素里面第4个、第8个、第12个.......子元素。

取-n+5表示找的子元素是前五个

n+5表示找的子元素是从第五个以后的子元素

九、伪元素 由 CSS 模拟出的标签效果 伪元素说明：：before在元素内容之前添加一个行内元素：：after在元素内容之后加一个行内元素

代码：

.footer .wrapper li::before { content: ''; display: inline-block; margin-right: 19px; width: 58px; height: 58px; background-image: url(../images/sprites.png); background-position: 0 0; vertical-align: middle; }

其中conner : '? '? ;是必须要添加的。

十、浮动

属性名：float

属性值：

left? :? 左浮动

right ： 右浮动

. 浮动元素会脱离标准流（简称：脱标），在标准流中不占位置 浮动元素比标准流高半个级别，可以覆盖标准流中的元素 小米布局：

代码 ：

<div class="box"> <div class="fl"></div> <div class="fr"> <ul> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> <li></li> </ul> </div> </div> <style> * { margin: 0; padding: 0; } li { list-style: none; } .box { margin: 0 auto; margin-top: 50px; width: 1210px; height: 450px; background-color: pink; } .fl { float: left; width: 300px; height: 450px; background-color: green; } .fr { float: right; width: 910px; height: 450px; } .fr li { float: left; margin-bottom: 10px; margin-right: 10px; width: 220px; height: 220px; background-color: blue; } .fr li:nth-child(4n) { margin-right: 0; } </style>

显示的结果：

网页导航案例 ：

代码：

<div class="nav"> <ul> <li><a href="#">腾讯视频</a></li> <li><a href="#">爱奇艺</a></li> <li><a href="#">B站</a></li> <li><a href="#">淘宝</a></li> <li><a href="#">芒果视频</a></li> <li><a href="#">天下足球</a></li> <li><a href="#">抖音</a></li> </ul> </div> <style> * { margin: 0; padding: 0px; } li { list-style: none; } a { text-decoration: none; } .nav { margin: 100px auto; width: 611px; height: 50px; background-color: pink; } .nav li { float: left; height: 50px; } .nav li a { display: block; padding: 0 20px; height: 50px; line-height: 50px; color: #333; } .nav li a:hover { background-color: green; color: #fff; } </style>

十一、定位

属性名：

position

静态定位：? static

相对定位：? relative

绝对定位? ?：absolute

固定定位? ：fixed

设定偏移值：

方向属性名属性值含义水平left?数字+px距离左边的距离水平right数字+px距离右边的距离垂直top数字+px距离上边的距离垂直bottom数字+px距离下边的距离

相对定位

position? ： relative;

相对自己原来的位置进行移动

在页面中占位置-不脱标

绝对定位

position? ：? absolute;

默认相对于浏览器可视区域进行定位

在页面中不占有位置-脱标

绝对定位相对于谁移动？ 1. 祖先元素中没有定位 → 默认相对于浏览器进行移动 2. 祖先元素中有定位 → 相对于 最近的 有定位 的祖先元素进行移动 经常用的就是：子绝父相。就是父亲使用相对定位，儿子使用绝对定位。

让盒子水平居中的案例（子绝父相）

1.先让盒子水平移动父亲盒子宽度一半；left：50%

2.然后移动自己盒子的一半：

普通做法：margin-left：负的子盒子宽度的一半 缺点：子盒子宽度变化后需要重新改代码 优化做法：transform：translateX(-50%) 优点：表示沿着X轴负方向（往左）始终移动自己宽度的一半，子盒子宽度变化不需要更改代码 代码： <div class="big"> <div class="small"></div> </div> <style> .big { position: relative; margin: 0 auto; width: 800px; height: 300px; background-color: pink; } .small { position: absolute; left: 50%; transform: translateX(-50%); width: 200px; height: 100px; background-color: blue; } </style>

显示结果：

垂直居中的做法相类似。

固定定位

position :? fixed;

相对于浏览器可视区域进行移动 在页面中不占位置 → 已经脱标 元素层级关系： 不同布局方式元素的层级关系： 标准流 < 浮动 < 定位 ? 不同定位之间的层级关系： 相对、绝对、固定默认层级相同 此时HTML中写在下面的元素层级更高，会覆盖上面的元素 改变定位元素的层级： 属性名：z-index ? 属性值：数字 数字越大，层级越高

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。