CSS那点事-总结常用样式

来源：互联网发布：学高中化学的软件编辑：程序博客网时间：2024/06/01 20:31

一些简单的样式其实就可以不用剖出来代码就可以懂的，所以有些简单的样式我就不用剖出来代码进行说明了，因为已经学过并掌握觉得没必要写这么详细，觉得小白还是适合去看看教程什么的，我写的东西就是一些简单的记录与对所学内容的总结

1) 通配选择器：*–获取页面中的所有标签

2) 类型选择器(标签选择器)：如div

3) class选择器：如.class–可以有多个，且自己命名

4) id选择器：如#id

5) 群组选择器：如.class,#id–用’,’连接，属于并列关系

6) 包含选择器：如#id .class

7) div span–获取div下的所有后代元素

8) div>span–获取div下的所有子元素

9) 既右选择器：如a.href–可以获取a下的所有href

10) .box1.box2–选择元素class既有.box1又有.box2的元素

11) div+span–选择紧连在div后面的span元素

2.选择器的优先级

选择范围越广，优先级越低

!important>行间样式>id>class> 类型 > 通配

可以通过约分包含选择器判断包含选择器的优先级

优先级一致时，后面覆盖前面

三. 常用的居中方法

1.`text-align:center;`/`line-height:xxpx;`:文字在块内水平居中/文字在块内垂直居中

2.`margin:0 auto;`:块只能水平居中，且只适用于子级比父级小的元素

3.子级位于父级的中心第一种方法

position: absolute;margin-left:-自己宽度的一半;margin-top:-自己宽度的一半;top:50%;left:50%;

4.子级位于父级的中心第二种方法

position: absolute;top:0;left:0;right:0;bottom:0;margin:auto;

四. 常用的清除浮动的方法

1.overflow:hidden;``hidden 可以清除浮动，但有可能会隐藏有用的东西，不推荐

2.`style="clear:both;"` 可以清除浮动但是会加入新标签，且一定是最后一个元素，调用时可能会出现问题，但是是清除浮动的真正方式

3.用`before` `after` 伪类清除浮动

.clearfix:before,.clearfix:after{    display:table;    content:"";      //只有`before` `after` 伪类才可以使用}.clearfix:after{    clear:both;}.clearfix{    *zoom:1;}/*兼容ie浏览器*/

五：设置元素透明的方式

1. `opacity:0;` 元素透明，包括块元素上的文字 ,1是不透明，0是全透明

2.`filter:alpha(opacity=0);` 同上，兼容ie版本

3.`background-color:rgba(0,0,0,0)` 背景颜色透明，背景上的文字不透明

4. 背景颜色设置为父元素的背景颜色

六：设置元素隐藏的方式

1. `visibility:hidden/visible;`–元素隐藏/不隐藏

2. `display:none;` –元素隐藏且不占位

3. 设置另外一个元素进行着遮挡

4. 用`margin` 把元素移动到页面外

5. 定位后用`left` 把元素移动到页面外

七：外边距问题

1.父子级包含的时候子级的`margin-top` 会传递给父级

        body{            background-color: #b2b0b0;        }        .father{            width:200px;            height:200px;            background-color: #E77F24;        }        .son{            width:100px;            height:100px;            background-color: slategray;            margin-top: 30px;        }

        <div class="father">            <div class="son"></div>        </div>

效果如右图所示

2.能用内边距就尽量不要使用外边距

3.上下外边距会叠压

.father{            width:200px;            height:200px;            background-color: #E77F24;            margin-bottom: 60px;        }        .son{            width:100px;            height:100px;            background-color: slategray;            margin-top: 30px;        }

<div class="father"></div><div class="son"></div>

效果如右图所示，可以看到上下元素间距明显不到90px

4. 外边距重叠（`margin-collapse`）的计算规则

1) 两个相邻外边距均为正时，折叠结果是他们中较大的值

2) 一正一负时，结果是两者相加之和

3) 两个均为负值时，结果是绝对值中的较大值

八：关于定位

1.position:relative;相对定位

特点

* 不影响元素本身的特性

* 不使元素脱离文档流(依然占位)

* 没有定位偏移量对元素无影响(相对于自身偏移)

* 提升层级，z-index:1;,默认为1，设置谁大谁就在前面

作用

* 配合绝对定位，让绝对定位相对父级定位

* 让一个元素进行位移（父元素比子元素大情况下）

2. position:absolute;绝对定位

特点

* 使元素完全脱离文档流

* 使内联元素支持宽高

* 块属性标签内容撑开宽度

* 相对于最近的有定位的父元素进行偏离，且逐层上找知道document

* 提升层级

3. position:fixed;绝对定位

:point_right: 与绝对定位一致，但相对于可视区域进行偏离，不兼容ie6及以下版本

九：关于默认样式的问题

1.默认样式的初始化

初始化浏览器CSS的所有默认样式，因为浏览器不同浏览器的样式不同，因此重置让所有浏览器的样式统一

2.自定义默认样式的作用

1) 清除浏览器的默认样式

2) 格式化样式，可以让自己重新定义

3) 将一些常用样式加入到自定义样式中去使用

如下代码所示，清除一些常用的默认样式

*{    box-sizing:border-box;    -moz-box-sizing:border-box;/*为了兼容低版本的浏览器*/    -webkit-box-sizing:border-box;/*为了兼容低版本的浏览器*/    color:#000;}body{    font-size:12px;    font-family:Arial,Verdana,Tahoma,"微软雅黑","黑体";    line-height:120%;    background:#fff;    margin:0;    overflow-x:hidden;/*做滚动条*/}p,h1,h2,h3,h4,h5,h6,ul,ol,dl,li,form,table{    margin:0;    padding:0;}a,img{    border:none;}img{    vertical-align:middle;    border:0;}li{    list-style:none;}i,em{    font-style:normal;}a{    text-decoration:none;     color:#000000;    border:0;}a:link{    text-decoration:none;     color:#000000;}a:visited{    text-decoration:none;     color:#000000;}a:hover{    text-decoration:none;     color:#000000;}a:active{    text-decoration:none;     color:#000000;}

阅读全文

0 0

CSS那点事-总结常用样式

目录

1. 盒模型

2. 选择器

3. 常用的居中方法

4. 常用的清除浮动的方法

5. 设置元素透明的方式

6. 设置元素隐藏的方式

7. 外边距问题

8. 关于定位

9. 关于默认样式的问题

一. 盒模型

1.box-sizing:border-box/content-box:边框盒模型/内容盒模型

盒模型由content,padding,margin,border 组成，其中content ,padding , border 是盒子的内部

示例：

二. 选择器

1.常用选择器

1) 通配选择器：*–获取页面中的所有标签

2) 类型选择器(标签选择器)：如div

3) class选择器：如.class–可以有多个，且自己命名

4) id选择器：如#id

5) 群组选择器：如.class,#id–用’,’连接，属于并列关系

6) 包含选择器：如#id .class

7) div span–获取div下的所有后代元素

8) div>span–获取div下的所有子元素

9) 既右选择器：如a.href–可以获取a下的所有href

10) .box1.box2–选择元素class既有.box1又有.box2的元素

11) div+span–选择紧连在div后面的span元素

2.选择器的优先级

选择范围越广，优先级越低

!important>行间样式>id>class> 类型 > 通配

可以通过约分包含选择器判断包含选择器的优先级

优先级一致时，后面覆盖前面

三. 常用的居中方法

1.text-align:center;/line-height:xxpx;:文字在块内水平居中/文字在块内垂直居中

2.margin:0 auto;:块只能水平居中，且只适用于子级比父级小的元素

3.子级位于父级的中心第一种方法

4.子级位于父级的中心第二种方法

四. 常用的清除浮动的方法

1.overflow:hidden;``hidden 可以清除浮动，但有可能会隐藏有用的东西，不推荐

2.style="clear:both;" 可以清除浮动但是会加入新标签，且一定是最后一个元素，调用时可能会出现问题，但是是清除浮动的真正方式

3.用before after 伪类清除浮动

五：设置元素透明的方式

1. opacity:0; 元素透明，包括块元素上的文字 ,1是不透明，0是全透明

2.filter:alpha(opacity=0); 同上，兼容ie版本

3.background-color:rgba(0,0,0,0) 背景颜色透明，背景上的文字不透明

4. 背景颜色设置为父元素的背景颜色

六：设置元素隐藏的方式

1. visibility:hidden/visible;–元素隐藏/不隐藏

2. display:none; –元素隐藏且不占位

3. 设置另外一个元素进行着遮挡

4. 用margin 把元素移动到页面外

5. 定位后用left 把元素移动到页面外

七：外边距问题

1.父子级包含的时候子级的margin-top 会传递给父级

效果如右图所示

2.能用内边距就尽量不要使用外边距

3.上下外边距会叠压

效果如右图所示，可以看到上下元素间距明显不到90px

4. 外边距重叠（margin-collapse）的计算规则

1) 两个相邻外边距均为正时，折叠结果是他们中较大的值

2) 一正一负时，结果是两者相加之和

3) 两个均为负值时，结果是绝对值中的较大值

八：关于定位

1.position:relative;相对定位

特点

* 不影响元素本身的特性

* 不使元素脱离文档流(依然占位)

* 没有定位偏移量对元素无影响(相对于自身偏移)

* 提升层级，z-index:1;,默认为1，设置谁大谁就在前面

作用

* 配合绝对定位，让绝对定位相对父级定位

* 让一个元素进行位移（父元素比子元素大情况下）

2. position:absolute;绝对定位

特点

* 使元素完全脱离文档流

* 使内联元素支持宽高

* 块属性标签内容撑开宽度

* 相对于最近的有定位的父元素进行偏离，且逐层上找知道document

* 提升层级

1.`box-sizing:border-box/content-box`:边框盒模型/内容盒模型

盒模型由`content`,`padding`,`margin`,`border` 组成，其中`content` ,`padding` , `border` 是盒子的内部

1) 通配选择器：`*`–获取页面中的所有标签

2) 类型选择器(标签选择器)：如`div`

3) class选择器：如`.class`–可以有多个，且自己命名

4) id选择器：如`#id`

5) 群组选择器：如`.class,#id`–用’,’连接，属于并列关系

6) 包含选择器：如`#id .class`

7) `div span`–获取div下的所有后代元素

8) `div>span`–获取div下的所有子元素

9) 既右选择器：如`a.href`–可以获取a下的所有href

10) `.box1.box2`–选择元素class既有.box1又有.box2的元素

11) `div+span`–选择紧连在div后面的span元素

`!important`>行间样式>`id`>`class`> 类型 > 通配

1.`text-align:center;`/`line-height:xxpx;`:文字在块内水平居中/文字在块内垂直居中

2.`margin:0 auto;`:块只能水平居中，且只适用于子级比父级小的元素

2.`style="clear:both;"` 可以清除浮动但是会加入新标签，且一定是最后一个元素，调用时可能会出现问题，但是是清除浮动的真正方式

3.用`before` `after` 伪类清除浮动

1. `opacity:0;` 元素透明，包括块元素上的文字 ,1是不透明，0是全透明

2.`filter:alpha(opacity=0);` 同上，兼容ie版本

3.`background-color:rgba(0,0,0,0)` 背景颜色透明，背景上的文字不透明

1. `visibility:hidden/visible;`–元素隐藏/不隐藏

2. `display:none;` –元素隐藏且不占位

4. 用`margin` 把元素移动到页面外

5. 定位后用`left` 把元素移动到页面外

1.父子级包含的时候子级的`margin-top` 会传递给父级

4. 外边距重叠（`margin-collapse`）的计算规则

1.`position:relative;`相对定位

* 提升层级，`z-index:1;`,默认为1，设置谁大谁就在前面

2. `position:absolute;`绝对定位

3. `position:fixed;`绝对定位