前端复习之旅---CSS

Κυρ*

已于 2023-08-01 21:47:40 修改

阅读量34

点赞数

分类专栏：前端知识总结文章标签：前端 css

于 2023-07-27 17:26:20 首次发布

本文链接：https://blog.csdn.net/mengameng97/article/details/131905088

版权

前端知识总结专栏收录该内容

6 篇文章 0 订阅

订阅专栏

定义：

层叠样式表，用于设计风格和布局。

引入方式：

行内样式：style=“color：red”
内部样式表：<style></style>
外部样式表：<link rel="stlyesheet" type="text/css" href="mystyle.css">

选择器：

1.通用选择器：*

2.标签选择器：p，div

3.id选择器：#id

4.class选择器：.class

5.属性选择器：

用于选取带有指定属性的元素:div[title]
含指定属性值的元素 [属性名="属性值"] 例如： p[title="abc"]
属性值以指定内容开头的元素 [属性名^="属性值"] 例如： div[class^="abc-"]
属性值以指定内容结尾的元素[属性名&="属性值"] 例如： div[class$="bc"]
包含指定内容的元素 [属性名*="属性值"] 例如： div[class*="bc"]
可以对所有带有 alt 属性的图像应用样式，从而突出显示这些有效的图像：img[alt]
具体属性值选择：a[href="http://www.w3school.com.cn/about_us.asp"] {color: red;}
用于选取带有以指定值开头的属性值的元素，该值必须是整个单词:img[src|="figure"]

6.派生选择器：

后代选择器：div span{}
子元素选择器：p>.box{}
相邻兄弟元素选择器：后一个---span+p{},后所有---span~p{}

7.组合选择器：

交集：p.box1{}

并集：.box1,.box2{}

8.伪选择器： p::after{} a:hover{}

选择器优先级：!important>内部样式>id选择器>类选择器>标签选择器>通配符选择器>继承>浏览器默认

属性：

单位：

px：像素
em：相对于元素的字体大小（font-size）,pixels/16=em
rem：相对于根元素的字体大小（相对于浏览器的基准字体大小）
vw：相对于视口宽度的1%
vh：相对于视口高度的1%

a标签：

a:link {color:#000000;} /* 未访问链接*/

a:visited {color:#00FF00;} /* 已访问链接 */

a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */

a:active {color:#0000FF;} /* 鼠标点击时 */

a:hover 必须跟在 a:link 和 a:visited后面

a:active 必须跟在 a:hover后面

背景background：

background-color: 背景颜色
background-image: 背景图片
background-repeat: 重复背景图片
background-attachment: 是否固定或者随着页面的其余部分滚动
background-position: 背景图片的位置
background-size: 背景的尺寸
background-origin: 背景图片定位区域
background-clip: 背景图片绘制区域

background的值的顺序是background-color，background-image，background-repeat，background-attachment，background-position。

文本：

水平对齐：text-align，垂直对齐:vertical-align，间距：letter-space(字符间距)，word-space(字间距)，line-height，修饰线：text-decoration，大小写：text-transform。

字体：

serif：衬线字体。

sans-serif：无衬线字体。

font：italic small-caps bold 12px/30px(fontsize/lineheight) serif；

列表：

无序列表ul，有序列表ol，里面用li。

简写属性：list-style: square inside url("sqpurple.gif"); [ list-style-type list-style-position list-style-image]。

内联元素/块状元素

内联元素：inline，不会独占一行，转换为块状元素用display：block。

块状元素：block，会独占一行，转换为内联元素用display：inline。

注意：

width和height只对block生效，对inline无效，可把内联元素变为inline-block再设置。

margin和padding只对inline的左右生效，对上下无效。

文档流：

标准流：从上到下排列。

浮动流：float浮动。

定位流：position的absolute和fixed定位。

盒子模型：

box-sizing：content-box；

包括content(width和height)，padding，border，margin。

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距。

一般浏览器也都默认为标准盒子模型。

IE盒子模型：

box-sizing：border-box；

width和height为指定内容区域+border+padding。

需要根据实际项目设定。

浮动：

设置浮动：float：left，right；

清除浮动：clear：left，right，both；

清除浮动带来高度塌陷的方法：

1.额外标签法：在最后一个浮动元素的末尾添加一个空的标签，例如<div style="clear: both"></div>,或者其它标签（如<br/>等）。

2.在父级盒子上添加 overflow 属性。

3.:after 方法：给父元素添加clearflex类名。

.clearflex::after{

content:"";

clear:both;

display:table;

}