css总结2

最新推荐文章于 2023-06-25 20:34:11 发布

Haley6

最新推荐文章于 2023-06-25 20:34:11 发布

阅读量467

点赞数

本文链接：https://blog.csdn.net/Haley6/article/details/110296359

版权

CSS总结2

1.Emment语法

1.1快速生成html:

标签名+table键；
<div>*3
父子关系： ul>li生成
兄弟： div+p
生成带类名或id的标签，div.(类名)或
div#（类名）
如果生成div类名有顺序，则用{＄}
p.a＄*5
生成标签里默认显示文字，div{文字内容}文字写在大括号里
div{＄}*5,生成内容为1-5的div

1.2快速生成css:

w100: width:100px;
h200: height:100px;
lh26: line-height:26px;
ti2em: text-indent:2em;
tdn: text-decoration: none;

2.css复合选择器

包括：后代，子，并集，伪类选择器。

2.1后代（包含）选择器

元素1 元素2 元素3 …{}
元素2为1后代（儿子，孙子，…），
元素中间空格隔开，修改元素2的样式
例：
当ul和ol都有li，选ol的li时

<style>
ol li {
            color: blue;
        }
</style>

适用于所有基础选择器，两个ul，选其中一个li里边a，给要选的ul加class="nav" style中加.nav li a{}

2.2子选择器

元素1>元素2{样式声明}
必须选亲儿子，不能是（重）孙子

<style>
    nav>a{color: red;}//选div里的a，不是p里的a
</style>
<body>
    <div class="nav">
		<a href="#">我是儿子</div>
		<p>
			<a href="#">我是孙子子</div>
		</p>
    </div>
</body>

2.3并集选择器（集体声明）

元素1，元素2 {样式}
div，
p{样式}
英文逗号为和意思；这会改变1和2标签共同样式；可用于任何选择器；通常竖着写；最后一个元素不加英文逗号。
div,p, .nav li{ color： red； }

2.4伪类选择器

结构伪类，表单伪类等，常用链接伪类
a:link{样式} 选择所有未被访问（未点击的）的链接（改色）.
a:visited 选择所有已被访问的（点击过的）链接（改色）.
a：hover{color: blue} 选择鼠标指针位于其上（鼠标经过的）的链接（改色）.
a：active 选择活动链接（鼠标按下未弹起链接）（改色）.
注意事项：
1.按顺序声明：lvha
l(link)ov(visited)e h(hover)a(active)te
2.链接在浏览器有默认样式需要单独指定样式。
（给body指定样式a样式不变）
一般只用：
a{ color:gray }
a:hover { color: red }(鼠标经过变色)

2.5：focus伪类选择器

选取获得焦点（光标）表单元素（主要针对表单）
更改样式
input:focus { background-color:yellow; }

2.6复合型选择器总结

选择器	作用	特征	使用情况	用法
后代	选择后代元素	子孙后代	多	空格隔开标签 .nav a {}
子代	选择最近一代元素	亲儿子	少	大于 .nav>p
并集	选择某些相同样式元素	可集体声明	多	逗号 .nav1, .nav2
链接伪类	选择不同状态链接	与链接有关	多	a {}; a:hover {}常见
：focus	选择获得光标表单	表单有关	少	input ：focus

3.元素显示模式

块元素和行内元素

3.1块元素：

<h1>-<h6> <p> <div> <ul> <ol> <li>
特点：
1 霸道，独占一行
2 高度，宽度，外边距，内边距都可以控制
3.宽度默认是容器（父级宽度）的100%
4.是一个容器级盒子，里面可放行内或者块级元素
注：

文字类元素内不能用块级元素,<p>不能放块级元素（尤其div)，主要放文字。
<h1>-<h6>也不能放块级元素

3.2行内（内联）元素

<a> <strong> <b> <em> <del> <s> <ins> <u> <span>等
<span>最典型
特点：
1.相邻行内元素在一行上，一行可显示多个。
2.高宽直接设置无效
3.默认宽度为本身内容宽度
4.行内元素只能容纳文本或其他行内元素
注：

链接里不能再放链接
特殊情况<a>里面可放块级元素，但最好给<a>转换为块级

3.3行内块元素

<img/> <input/> <td>等
特点：
1.与相邻行内元素在一行上，但之间有缝隙，一行可显示多个
2.默认宽度为本身内容宽度
3.宽度，行高以及内边距都可以控制

3.4元素显示模式总结

元素模式	元素排列	设置样式	默认宽度	包含
块级	一行一个	可设置宽高度	容器100%	可含任何标签
行内	一行多个	不可直接设宽高度	本身内容宽度	容纳文本或其他行内标签
行内块	一行多个	可设宽高度	同上

3.5元素显示模式转换

一个模式元素转为另一种
转为块元素：display:block(可设宽高)（用最多）
转为行内元素：display:inline(不可设宽高)
转为行内块元素：display:inline-block(可设宽高)
单行文字垂直居中代码：
文字行高等于盒子高度
```
<style>
div {
	line-height:40px;  
	height:40px
}
</style>
```
文字行高小（大）于盒子高度，文字偏上（下）

4.css背景

4.1背景颜色

back-ground-color: transparent;(默认透明)
back-ground-color: red(颜色手动指定）;

4.2背景图片

场景：用于logo,装饰小图片，超大背景图
语法：back-ground-image:none（默认没有背景图）;
none可换为url(图片路径例：img/images.jpg).

4.3背景平铺

background-repeat:repeat;(此时背景在纵向或横向平铺，默认情况)
background-repeat:no-repeat；（背景不平铺）；
background-repeat: repeat-x；（背景沿x平铺）
background-repeat: repeat-y；（背景沿y平铺）
页面元素既可以添加背景颜色也可以添加背景图片，只不过图片会压住颜色

4.4背景图片位置

background-position: x y;
x,y可以为方位名词或精确单位。

方位名词：top center bottom left right
background-position: left top;(等价于left top,与顺序无关)
只指定一个方位名词，另一个省略，第二个默认缺少方向轴上居中
精确单位：第一个必定为x坐标，第二个必定为y坐标。
background-position: 30px 20px;
表示x轴上距离左边30px，距离（父级）上边20px；
只指定一个数值，该数值一定为x坐标，另一个默认居中。
混合单位：第一个为x坐标，第二个为y坐标
background-position: 30px center;
意思为水平距离左边30，垂直居中

4.5背景图像固定（背景附着）

background-attachment: scroll；(背景图像随着对象内容（文字）滚动;
background-attachment: fixxed;(背景图像不滚动，对象内容（文字）滚动。
背景属性复合：
background：color url() no-repeat fixed center top;(颜色，图片路径，平铺，滚动，位置)

4.6背景颜色半透明

background：rgab(0,0,0,0.3)
最后一个参数为alpha透明度，取值为0-1之间；习惯把0.3写为.3；背景半透明指盒子背景半透明，里面内容不受影响。

4.7背景总结

属性	作用	值
background-color	背景颜色	预定义颜色值/十六进制/RGB代码
background-image	背景图片	url（图片路径）
background-repeat	是否平铺	repeat/no-repeat/repeat-x/repeat-y
background-position	背景位置	length/position 分别是x和y坐标
background-attachment	背景附着	scroll（背景滚动）/fixed（背景固定）
背景简写	书写简单	背景颜色图片地址平铺滚动位置
背景色半透明	背景色半透明	background：rgba（0，0，0，.3，）后面必须是4个值

5.css三大特性

层叠，继承性，优先级

5.1层叠性

相同选择器设置相同样式，一个样式会覆盖另一个冲突样式。
样式冲突，遵循就近原则；样式不冲突，不层叠，样式正常执行。

5.2继承性

字标签会继承父标签某些样式（如文本颜色字号…）（子承父业）
代码div里p，继承div的颜色，文字大小
可继承样式：font-,text-,line-,color等
特殊：行高继承
行高可有单位也可以没有
body { font:12px/1.5 '宋体' } 这个1.5为子元素(例：<p> 文字大小（font-size)的1.5倍
行高即为p文字大小的1.5倍（没有手动指定文字大小，则会继承父亲文字大小）

5.3优先级

同一元素指定多个选择器，选择器相同，层叠性；选择器不同，则根据选择器权重执行。

选择器	选择器权重
继承或*	0，0，0，0
元素选择器	0，0，0，1
类，伪类选择器	0，0，1，0
id选择器	0，1，0，0
行内样式选择器（style=“”）	1，0，0，0
important重要的	无穷大

1.权重注意：

4组数字组成，不会进位。
可理解为类选择器永远大于元素选择器，id选择器永远大于类选择器，以此类推。
从左向右判断权重大小，某位相同，判断下一位。
继承的权重是0，如果该元素没有直接选中，不管父元素权重多高，子元素所得权重仍为0。（链接原理）

看标签执行哪个样式，先看标签有没有被选出来，优先执行标签选出的样式。
2.权重叠加：
复合选择器有权重叠加问题
例：div ul li :0,0,0,3;
.nav ul li:0,0,1,2;
a:hover:0,0,1,1;
.nav a:0,0,1,1;

6.盒子模型

6.1 网页布局本质

网页布局三大核心：
盒子模型浮动定位
网页布局过程：
1.准备好相关网页元素（基本都是盒子）
2.用css设置样式，摆放盒子到相应位置（核心）
3.盒子里装内容

6.2盒子模型组成

盒子模型：把html页面中布局元素看作一个矩形盒子，是一个盛装内容容器，css本质上是一个盒子，封装html元素：4个。
边框（border)，外边距（margin)，内边距(padding)，实际内容(content)

6.3边框

css允许指定边框样式和颜色
边框：border设置组成：宽度，样式，颜色
border-width:(边框粗细，一般单位px)
border-style:(实线：soild ；虚线：dashed;点线：dotted;none;等)
border-color：颜色（pink）
边框复合写法：border:1px soild red;(没有顺序)
边框分开写：
border-top:1px dotted pink;为只设定上边框。（top可换为bottom,left,right）
(运用层叠性)

<style>
    div {
        border:1px  soild  red;
	   border-top:1px soild pink;
        }
</style>
//(上边框优先执行粉色)（border范围大，顺序不能颠倒)

6.4表格细线边框

border-collapse:相邻边框会合并在一起
（1+1=1）

<style>  
    table,
    td,th {
            border: 1px solid pink;
            /* 合并相邻边框 */
            border-collapse: collapse;
            font-size: 14px;
            text-align: center;
        }
    </style>

6.5边框影响盒子实际大小：

边框会增加盒子实际大小
解决：
1.测量盒子大小不测边框
2.测量时包含边框，则需要width/height减去边框宽度（双倍左右都要减）

6.6内边距

padding：内边距，设置盒子边框与内容间距离。
（默认文字与盒子边框紧贴）
padding-left:10px;
设置内容与盒子左内边距10px (left可换为top,bottom,right)
内边距复合写法：

值的个数	表达信息
padding ：5px（1个）	上下左右都有5像素内边距
padding ：5px 10px（2个）	上内边距5px，左右内边距10px
padding ：5px 10px 20px（3个）	上内边距5px，左右内边距10px，下内边距20px
padding ：5px 10px 20px 30px（4个）	上内边距5px，右内边距10px，下内边距20px，左内边距30px，

注意：
添加padding后，影响盒子实际大小
1.内容和边框有了距离，添加内边距
2.盒子有宽高，再指定内边框，会撑大盒子。
解决：
1.让width/height减去多出来的内边距大小width:160px; padding:20px；形成200px。
2.padding不撑开盒子：没有width属性时。（增加内边距与否都宽度默认为父级盒子宽）
3.width:100%也会使padding增加盒子大小。

6.7外边距

控制盒子与盒子间距离
margin-bottom:20px;盒子下外边距（bottom可换为left,right，top）
margin简写与padding一致

盒模型：
盒子内容（content），padding，border，margin。
典型应用：块级盒子水平居中。
要求：
1.盒子必须指定宽度。
2.左右外边距设置为auto即可水平居中，有以下3种：
margin-left:auto;margin-right:auto;
margin:auto;
margin:0 auto; (多用)0可改为npx。
注：
1.margin:0 auto;用于块级元素
2.行内元素或行内块元素水平居中：给父元素添加text-align:center
外边距合并
（嵌套块元素垂直外边距塌陷）
两个嵌套（父子）关系块元素，父元素有上边外边距同时子元素也有上外边距，此时会塌陷较大外边距值（给子元素加外边距，父元素移动）
解决：
1.为父元素指定上边框
2.为父元素定义内边距
3.为父元素添加overflow:hidden;(多用)
盒子有浮动，固定，绝对定位时不会陷。

6.8清除内外边距

浏览器默认内外边距
清除：
```
<style>
    * {
        margin: 0;
        padding:0;
    }
</style>(通常也为css第一句话)
```
行内元素尽量只设置左右内外边距，不要设置上下内外边边距，转换为块级和行内块就可以设置上下内外边距了。
父子用margin；兄弟padding；链接用padding。8

6.9圆角边框

border-radius：设置外边框圆角（圆与边框交集）
border-radius：25px（30%）；其中radius为圆半径意思
参数值可为数值或百分比。
盒子变圆形：正方形盒子中加
border-radius：50%（或宽度一半大小）；
圆角矩形：矩形中加border-radius：高度一半大小；
border-radius：10px 20px 30px 40px；
表示左上，右上，右下，左下圆角大小。
当属性值为两个数值时，为对角线设置圆角大小。
只设置一个角：

borde-bottom-left-radius：10px；（不能颠倒bottom,left）
其他同理，先上下再左右。

6.10盒子阴影

box-shadow：h-shadow v-shadow blur spread color inset

值	描述
h-shadow	必写。水平阴影位置，允许负值
v-shadow	必写。垂直阴影位置，允许负值
blur	可选，模糊距离
spread	可选，阴影尺寸
color	可选，阴影颜色
inset	可选，将外阴影（outset）转为内阴影

注：1.默认外阴影（outset）,不可以写这个单词，否则导致阴影无效。
2.盒子阴影不占用空间
原先盒子没影子鼠标经过有的代码：

<style>
div：hover{
		box-shadow：10px 10px 10px -4px rgba（0，0，0，.3）；
  		  }
</style>

6.11文字阴影

text-shadow:h-shadow v-shadow blur color （与盒子阴影相同表示）

7.浮动

7.1传统网页布局方式

普通流（标准流/文档流）
标签按默认好方式排列.

1.块元素独占一行，从上向下按顺序排列
常用：div, hr, p,h1-h6,ul,ol,dl,form,table
2.行内元素从左到右顺序排列，碰到父元素边缘自动换行
常用：span ，a，i，em
标准流是最基本布局方式.(实际开发一个页面包含三种布局方式)

7.2浮动

7.2.1为什么需要浮动？

让多个块级盒子水平排成一列
（转换为行内块可实现一行显示但中间有缝隙，难控制）
浮动典型应用：多个块级元素一行内显示。
网页布局第一准则：多个块级元素纵向排列找标准流，多个块元素横向排列找浮动.

7.2.2浮动

float属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一浮动框边缘。
选择器 {
float：属性值
}
属性值：none（元素不浮动，默认）
left（元素左浮动）
right（元素右浮动）

7.2.3浮动特性

浮动元素会脱离标准流（脱标）
脱离标准普通流控制（浮）移动到指定位置（动）
浮动的盒子不再保留原先位置，会浮在标准流上方
多个盒子都设置浮动，它们会按属性一行内显示并且顶端对齐排列。
注：
1.浮动元素相互贴一起，如果父级宽度装不下这些浮动盒子，多出的盒子会另起一行对齐。
2.任何元素都可浮动，浮动元素会具有行内块元素特性。
3.如果行内元素有浮动，不需要转换块级，行内元素可直接设置宽度，高度
4.如果块级盒子没有设置宽度，默认宽度和父级一样宽，但添加浮动后，大小根据内容决定。浮动盒子间无缝隙。

7.2.4浮动和标准流搭配

为约束浮动，一般先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置，符合网页布局第一准则。
注：（
1.一浮全浮）一个盒子里有多个子盒子，一个盒子浮动，其他兄弟也该浮动，防止引起问题。浮动的盒子只会影响浮动后边标准流，不会影响前面标准流

7.3清除浮动

为什么清除浮动？
父级盒子很多情况不方便给高度，但子盒子浮动，父盒子高度会为0，此时影响下方盒子，不会撑开父盒子。（父级没高度，子盒子浮动，影响下面布局）
理想：让子盒子撑开父盒子，有多少孩子，父盒子就有多高。
清除浮动本质：清除浮动元素脱标造成影响
父盒子有高，不需要清除浮动
清除浮动后，父盒子根据浮动子盒子自动检测高度，父盒子有高度不会影响下面标准流。
语法：
选择器 {
clear:属性值；
}
属性值：left(清除左浮动)；right;both(多用同时清除左右两侧浮动)
清除浮动也为闭合浮动

方法：
‌1.额外标签法（隔离法）
在浮动元素末尾添加一个空标签
例：<div style=“clear both”></div>或其他<br/>等
新添标签必须为块级元素（此方法结构化差，不常用）
‌2.父级加overflow
找到父盒子添加 overflow:hidden(多用）/auto/scroll
(但此方法无法显示溢出部分）
‌3.父级加after伪元素
css先写以下代码

<style>
     .clearfix:after {
            content: "";
            display: block;
            height: 0;
            clear: both;
            visibility: hidden;
        }
        .clearfix {
            /* IE6、7专有 */
            *zoom: 1;
        }

</style>

然后找到父盒子添加类属性值（clearfix)。(常用)
‌4.父级加双伪元素
写以下代码到css

    <style>
        .clearfix:before,
        .clearfix:after {
            content: "";
            display: block;
        }
        .clearfix::after {
            clear: both;
        }
        .clearfix {
            /* IE6、7专有 */
            *zoom: 1;
        }
    </style>

然后找到父盒子添加类属性值（clearfix)（多用）

8.css属性书写顺序

1.布局定位属性：display/position/float/clear/visibility/overflow（建议display第一个写）
2.自身属性：width/height/margin/padding/border/background
3.文本属性：color/font/text-decoration/text-align/vertical-align/white-space/break-word
其他属性：content/cursor/border-radious/box-shadow/text-shadow/background-gradient…

9.页面布局整体思路：

1.定版心（测量）（去浏览器边距）
2.分析行模块，列模块
3.确定每个列大小，之后确定列位置
4.制作html，先结构，后样式，结构永远最重要。

10定位

为什么需要？
某元素可自由在一个盒子内移动位置，并压住其他盒子；当滚动窗口时，盒子固定在屏幕某位置。
定位：可以让盒子自由在某个盒子内移动位置或固定在屏幕中某个位置，并压住其他（前面和后面）盒子。

10.1定位组成

定位：将盒子定在某位置，也是摆放盒子，按照定位方式移动盒子.（定到任何位置）
定位=定位模式+边偏移
定位模式：用于指定元素在文档定位方式。
边偏移：决定元素最终位置。

定位模式：
position为属性
属性值：static 静态定位
relative 相对定位
absolute 绝对定位
fixed 固定定位
边偏移：4个属性：top,bottom,left,right

便偏移属性	示例	描述
top	top：80px	顶端偏移量，定义元素相对其父元素上边线距离
bottom	bottom：80px	底端偏移量，定义元素相对其父元素下边线距离
left	left：80px	左端偏移量，定义元素相对其父元素左边线距离
right	riaght：80px	右端偏移量，定义元素相对其父元素右边线距离

10.1.1静态定位：无定位

选择器 {
position：static；
}
注：按照标准流摆放位置，无边偏移（少用）

10.1.2相对定位

元素移动位置时，相对于原来位置说的.
选择器 {
position：relative；
top：0；
left：0；
}
注：
1.以自己原来位置为参照
2.原来在标准流的位置仍保留，后面盒子以标准流形式对待它（不脱标）
典型应用：给绝对定位当爹。

10.1.3绝对定位

元素移动位置时，相对于祖先元素位置说的.
选择器 {
position：absolute；
top：0；
left：0；
}
特点：
1.如果没有祖先元素或祖先元素无定位，则以浏览器为准定位。
2.如果祖先元素有定位（相对，绝对，固定定位），则以最近一级的有定位祖先元素为参考点移动位置。
3.绝对定位不再保留原先位置。（脱标）

10.1.4子绝父相

子级不占有位置，绝对定位；父级占位置，相对定位。
子级绝对定位，不占有位置，可放到父盒子里面任何一个地方，不影响其他兄弟盒子；父盒子需要加定位限制盒子在父盒子内显示；父盒子布局需要占有位置，只能是相对定位。
（某些情况也会用到子绝父绝，子相父绝等）

10.1.5固定定位

元素可固定在浏览器可视去位置
使用场景：浏览器页面滚动时元素位置不变
语法：选择器 {
position：fixed；
top：0；
left：0；
}
特点：
1.以浏览器可视窗口为参照点移动元素。（跟父元素没任何关系）
2.不随滚动条滚动
3.不再保留原先位置（脱标，可看作特殊绝对定位）

小技巧：固定到版心右侧：
1.固定定位盒子：left：50%；
2.固定定位盒子：margin-left版心宽度一半距离。多走版心宽度一半位置

    <style>
        .fixed {
            position: fixed;
            left: 50%;
            /* 1.走浏览器宽度一半 */
            margin-left: 405px;
            /* 2.利用margin走版心盒子宽度1半距离 */

            width: 50px;

            height: 150px;
            background-color: skyblue;
        }
</style>

10.1.6粘性定位（少用）

（相对定位与固定定位混合）
选择器{
position：sticky；
top：10px；（距离浏览器顶部10px变为粘性定位）
}
特点：
1.以浏览器可视窗口为参照点移动元素
2.占有原先位置。
3.必须添加top,bottom,left,right一个才有效。

10.1.7 定位总结

定位模式	是否脱标	移动位置	是否常用
static 静态	否	不能使用边偏移	否
relative 相对	否（保留标准流中位置）	相对自身位置移动	是
absolute 绝对	是（不保留标准流中位置）	相对带有定位的父级位置移动	是
fixed	同上	浏览器可视区	是
sticky 粘性	否（保留标准流中位置）	浏览器可视区	否

注：记住相对，绝对，固定定位：1.是否保留位置（脱标否）2.以谁为基准点

10.2定位叠放次序

可以用z-index来控制盒子前后次序（z为z轴）
选择器 {z-index ：1；}
数值可正，0，负。（默认auto）
注：
1.数值越大，盒子越靠上。
2.如果属性值相同，则按照书写顺序写，后来居上。
3.数字后面不能加单位。
4.只有定位盒子才有z-index属性。

10.3定位拓展

10.3.1绝对定位水平垂直居中

加了absolute的盒子不能通过加margin：auto；水平居中。可通过下列代码实现。

    <style>
        .box {
            position: absolute;
            /* 1.left 走50% 父容器宽度的一半 */
            left: 50%;
            /* 2.margin 负值 往左边走自己盒子宽度一半 */
            margin-left: -100px;
            top: 50%;
            margin-top: -100px;

            width: 200px;
            height: 200px;
            background-color: yellow;
        }
</style>

10.3.2定位特性

行内元素添加绝对或固定定位，可直接设置宽高.
块级元素添加绝对或固定定位，如果不给宽高，默认大小为内容大小。
浮动，绝对（固定）定位（都（脱标)），都不会引发外边距合并问题

10.3.3压文字

绝对（固定）定位会压住下面标准流盒子（包括文字图片）,而浮动只会压住下方盒子，不会压住标准流盒子中的文字（图片）
浮动原来产生是为做文字环绕图片效果的

10.4网页布局总结

1.标准流：可以让盒子上下排列或左右排列，垂直的块级盒子显示用标准流。
2.浮动：可让多个块级盒子一行显示或左右对齐盒子，多个块级盒子水平显示用浮动。
3.定位：有层叠概念，可让多个盒子前后叠压显示，如果元素在某个盒子内移动就用定位布局。

10.5元素显示与隐藏属性

隐藏不等于删除!!!
1.display显示隐藏（也可模式转化，主要为控制元素显示）
属性值：none；（隐藏对象并不再保留原来位置）
block；（除转换为块级元素外，同时还有显示元素意思）
2.visibility
属性值：visible(元素可视)
hidden(元素隐藏并保留原来位置)
如隐藏位置保留原来位置用visibility：hidden.
如隐藏位置不保留原来位置用display:none;(多用)
3.overflow(对溢出部分处理）
指定如果内容溢出一个元素框（超过其指定宽和高），会发生的样式。
visible：不剪切内容，也不添加滚动条（默认）
hidden ：不显示超过对象尺寸内容，超出部分隐藏
scroll：溢出部分显示滚动条不溢出也显示滚动条
auto：溢出时候才显示滚动条，不溢出不显示滚动条
一般情况，不想让溢出内容显示，如果有定位盒子，请慎重使用，小心隐藏掉定位盒子想要显示出父盒子溢出的部分。

Haley6

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css总结2

CSS总结21.Emment语法1.1快速生成html:标签名+table键；<div>*3父子关系： ul>li生成兄弟： div+p生成带类名或id的标签，div.(类名)或div#（类名）如果生成div类名有顺序，则用{＄}p.a＄*5生成标签里默认显示文字，div{文字内容}文字写在大括号里div{＄}*5,生成内容为1-5的div1.2快速生成css:w100: width:100px;h200: height:100px;lh26:
复制链接

扫一扫