css知识点总结2

最新推荐文章于 2024-10-10 23:35:53 发布

qq_67263268

最新推荐文章于 2024-10-10 23:35:53 发布

阅读量47

点赞数

文章标签： css html 前端

本文链接：https://blog.csdn.net/qq_67263268/article/details/123340054

版权

盒子模型
标准和模型 w3c标准盒
盒子大小=width +padding+border
（width height 内容大小）

padding：10px 20px
值1上下值2左右
10px 20px 30px
值1上值2左右值3下
10px 20px 30px 40px
值1上值2右值3下值4左
a：link{}未访问状态
a：visited{}访问后状态
a：hover{}鼠标悬停状态
a: active {}激活状态
width和height
只定义内容的大小，不包含边框和边距
如果内容太多，超过了width或height，那么默认情况下将忽略width或height的设置
overflow属性 (overflow-x overflow-y)
定义内容超过width和heigth时的显示方式
scroll;使用滚动条，不论内容是否超出
auto;根据情况，如果内容超出了width，则出现横向滚动条，如果内容超过了height，则出现纵向滚动条，否则不显示滚动条
hidden;超出部分被隐藏
visible;默认值，忽略width或height
边框的三个方面(webkit、firefox和ie)
border-width,边框的宽度
border-color,边框的颜色
border-style,边框的样式（border-style:dotted、solid、double、dashed; ）
边框的综合定义
分开单独设置，
例：border-width:1px; border-color:#00f; border-style:solid;
使用综合属性
例：border:1px #00f solid
注意：三个值没有先后顺序，中间用空格隔开
padding（内边距）
边框和内容之间的空白宽度
注意：这个部分只有空白，不能设置外观样式，颜色等，只能设置空白的宽度
padding的综合设置
例：padding:2px;(四个内边距都为2px)
padding的单边设置
例：padding-left:2px;(左边的边框和内容之间的距离为2px)
margin（外边距）
标签和它相邻的标签之间的空白宽度
外边距的设置是相叠加的
margin的综合设置
例：margin:10px;(和四边临近的标签的距离都为10px)
margin的单边设置
例：margin-left:10px;(标签距左边10px)
特别
<body>标签的margin代表内容与浏览器边框的距离
两个行内元素的margin-right和margin-left，采用“和”
两个块元素的marign-top和margin-bottom，采用“最大值”
background-color
定义标签的背景颜色
background-image
定义背景图片,可定义多背景
background-repeat
定义背景图片的显示方式
repeat，图片重复
repeat-x，图片横向重复
repeat-y，图片纵向重复
no-repeat，图片不重复
background-position
定义背景图片的位置
直接使用两个定位单词，例:background-position: right top;
使用x、y坐标，例:background-position: 20px 30px;
background-size
定义背景图片的大小
background-size: length | percentage | cover | contain;
cover:把背景图像扩展至足够大，
以使背景图像完全覆盖背景区域。（可能会裁剪图片）
contain:把图像图像扩展至最大尺寸，
以使其宽度和高度完全适应内容区域。(可能会出现空白)
background-origin?
定义背景图片的渲染位置
背景图片可以放置于padding-box 、 content-box 或 border-box 区域。
background-attachment
定义背景图片是否固定或者随着页面的其余部分滚动
background-attachment：fixed（固定）| scroll（默认）
背景简写：不按顺序，除了位置在前大小在后，中间用/隔开

css精灵是什么？

是一种网页图片应用处理方式。

原理

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字精确的定位出背景图片的位置。

优点

1.利用CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，是css最大的优点

2.CSS Sprites能减少图片的字节，曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和。

3.解决了网页设计师在图片命名上的困扰，只需对一张集合的图片上命名就可以了