认识css
css主要用来设置HTML页面中文本内容的(字体 大小 对齐方式)，图片外形（宽高，边框样式，边距等）以及板面布局外观样式。
HTML主要做结构，显示元素内容。
css美化HTML，布局页面。
css规则由两个主要的部分构成：选择器以及一条或者多条声明
选择器
选择器作用：用来选择标签，class选择器，#id选择器…
选择器分为：基础选择器，复合选择器。
基础选择器：标签选择器，类选择器，id选择器，通配符选择器。
1：标签选择器：标签选择器是指用HTML标签名称作为选择器。
<head>
<style>
选择器｛样式｝
p{color：red；
font-size：10px；
}
div｛color：black；
font-size：13px；｝
</style>
</head>
<body>
<p>有点意思<p>
<div>吼吼标签选择器</div>
</body>
2：类选择器：
.类名｛
属性1：属性值1；
…
｝
<head>
<style>
选择器｛样式｝
.hao{color：red；
font-size：10px；
}
.hei{color：black；
font-size：10px；
}
</style>
</head>
<body>
<p class=’hao’>有点意思<p>
<p class=’hei’>有点意思<p>
</body>
类选择器-多类名
可以给一个标签指定多个类名，可以理解为一个标签有多个名字。
1：使用方式：< div class=“firist second…”>内容
可以写多个类名 但是之间用空格隔开。
3：id选择器
html元素以id属性来设置id选择器，css中id选择器以#来定义,只能调用一次，别人切莫使用。
#id{
属性1：属性值1；
...
}
4：通配符选择器
使用*定义，它表示选取页面中所有元素。
*{
属性1：属性值1；
...
}
css字体属性
用于定义文字大小 粗细 和文字样式
1：使用font-family 属性定义文本的字体样式
p{font-family:'微软雅黑','其他',...;}
2：字体大小：font-size
p{
font-size:10px;
}
3：字体粗细：font-weight
<style>
p{
font-weight:normol;//正常字体
font-weight:bold;//粗体
font-weight:bolder;//特粗体
font-weight：lighter；//细体
font-weight:100~900;//700等价于bold，不要加单位，400等价于normol
}
</style>
4：文本风格：font-style
<style>
p{
font-style:normal//默认值
font-style:italic//显示斜体
</style>
5：字体复合写法：
body{
font:font-style font-weight font-size/line-height font-family
}
p{
font:italic 700 16px '微软雅黑'
}
不需要设置的属性可以不要，但是必须保留font-size和font-family，否则不会起作用。
css的文本属性
可以定义文本的外观，比如颜色，对齐文本，装饰文本，文本缩进，行距
<style>
定义文本颜色:**color**
div{
color:red;
}
</style>
2：对齐文本：text-align
<style>
让div盒子里面文字居中对齐
div{
text-align:center;
}
让div盒子里面文字左右对齐
div
{
text-align:left/right;
}
</style>
3：定义文本加下划线删除线上划线 text-decoration
<style>
//加下划线
div{
text-decoration:underline;
}
//默认没有装饰线
div{
text-decoration:none;
}
//上划线
div{
text-decoration:overline;
}
</style>
4：段落的首行缩进：text-indent
<style>
div{
text-indent:10px;
}
</style>
em是一个相对单位，就是当前元素1个文字的大小，如果当前元素没有设置大小，则会按照父元素的一个文字大小
p{
text-indent:2em;
2em相对于两个文字大小
}
5：设置行高可以控制文字行与行之间距离line-height
行高=文字高度+上间距+下间距
<style>
文字默认高度为16px；
div{
line-height:16px;
}
//若设置为26px则为上间距为5px下间距为5px文字高度16px
</style>
测量行高：从上一行的最下沿到下一行的最下沿。
css的引入方式
1：行内式
2：嵌入式
3：链接式
1：内部样式表（嵌入式)
把所有的css代码抽取单独放在一个< style>里面
<style>
div{
color:red;
}
</style>
2：行内样式表（行内式）
<body>
<p style="color:pink; font-size:10px;">我是哈哈哈</p>
</body>
3:外部样式表：把样式单独写在css文件里面，之后把css文件引入html文件里面
通过link标签引入：
<link=rel="stylesheet"` href="css文件的路径"
调试工具：打开游览器，右击页面空白处-》检查，点element；
第二天
css复合选择器：是基础选择器复合；由两个或者多个基础选择器复合；后代选择器，子选择器，并集选择器，伪类选择器。
1：后代选择器
后代选择器又称为包含选择器，可以选择父元素里面的子元素，其写法就是把外标签写在前面，内层标签写在后面，中间用空格分隔，当标签发生嵌套时，内层标签就成为外层标签成为后代。
<style>
ol li {
color: red;
}
</style>
</head>
<body>
<ol>
<li>我是ol的孩子</li>
<li>我是ol的孩子</li>
<li>我是ol的孩子</li>
</ol>
<ul>
<li>我是ul的孩子</li>
<li>我是ul的孩子</li>
<li>我是ul的孩子</li>
</ul>
</body>
元素1 元素2 元素3 {样式声明}
1是父级 2是子级 3是子级的子级。
2：子代选择器
子选择器：只能选择作为某元素最近一级的子元素，简单理解选亲儿子。
语法：元素1>元素2
元素1和元素2中间用大于号隔开。元素1是父级，元素2为子级
3：并集选择器
可以选择多组标签，同时为他们定义相同的样式用于集体声明
语法规范：元素1，元素2{ }；
元素1 元素2没有关系。
<style>
/* 把12变粉红色 */
div,
p {
color: pink;
}
/* 把12改红色456改粉红色 */
div,
p,
ul li {
color: pink;
}
</style>
</head>
<body>
<div>1</div>
<p>2</p>
<span>3</span>
<ul class="pig">
<li>4</li>
<li>5</li>
<li>6</li>
</ul>
</body>
4：伪类选择器
用于给某些选择器添加特殊效果，比如给链接添加特殊效果，或选择第一个，第n个元素；
比如鼠标经过某个链接就变颜色。
用冒号表示：比如:hover :first-child
a:link 选择所有未被访问的链接
a:visited 选择所有已被访问的链接
a:hover 选择鼠标指针位于其上的链接
a:active 选择活动链接（鼠标按下未弹其链接）
链接伪类注意事项：声明请按照顺序：：link ：visited ：hover ：active
因为a链接在浏览器中具有默认样式，所以我们实际工作中都需要给链接单独指定样式。
//实际开发一般这样子
<style>
/* a是标签选择器 所有链接 */
a{
color: gray;
}
/* 鼠标经过由原来灰色变成红色 */
a:hover{
color: red;
}
</style>
5：focus 伪类选择器
用于选取获得焦点的焦点的表单元素
焦点就是光标 一般情况类表单元素才能获取，因此这个选择器主要针对表单元素
<style>
/* 把获得光标的input表单元素选出来 */
/* 也就是点击某一个表单元素，那一个就会变成红色 */
input:focus{
background-color: red;
}
</style>
</head>
<body>
<input type="text">
<input type="text">
<input type="text">
</body>
css的元素显示模式：
1：块元素：
< h1>~< h6> < p> < div> < ul> < ol> < li>
1：独占一行
2：可以设置高度宽度 外边距 以及内边距都可以控制
3：默认宽度是容器的100%
4：是一个容器及盒子，里面可以放行内或者块级元素
< p>里面只能放文字，不能放块元素例如div。< h1>~< h6>里面也不能放块元素
2：行元素
例如：< a> < strong> < b> < em> < i> < del> < s> < ins> < u>< span>
1:相邻行内元素在一行 一行可显示多个
2：高宽不能设置
3：行内元素只能容纳文本或者其他行内元素
3：行内块元素
< img/> < input/> < td>同时具有块元素还有行内元素特点。
1：其宽高还有外边距内边距可以控制
2：和相邻的行内元素在一行，他们中间会有空白间隙 一行可以显示多个
4；显示模式的转化
/* 把行元素改块元素 /
display: block;
/ 把块元素变行元素 /
display: inline;
/ 把行元素变行内块元素 */
display: inline-block;
<style>
a{
/* 把行元素改块元素 */
display: block;
width: 200px;
height: 200px;
}
div{
/* 把块元素变行元素 */
display: inline;
}
span{
/* 把行元素变行内块元素 */
display: inline-block;
}
</style>
</head>
<body>
<a href="#">我是行元素</a>
<div>我是块元素</div>
<span>我是行元素</span>
</body>
5：文字垂直居中：让文字的行高等于盒子的高度就可以让文字在当前盒子里面垂直居中
line-height=height。
css背景：
1：背景颜色：background-color:颜色/transparent
<style>
div{
background-color: red;
background-color: transparent;
/* 透明 */
}
</style>
2：背景图片：background-iamge属性描述元素的背景图像，实际开发常见于logo或者其他装饰性小图片或者超大背景图片，优点便于控制位置。
语法：background-image:none /url(图片位置);
none：无背景图片
url：插入背景图片
div{
background-image: url(bitbug_favicon.ico);
}
3：背景平铺：
背景图片默认是平铺的，所有加了背景图片，默认平铺
div{
background-repeat: no-repeat/repeat/repeat-x/repeat-y;
repeat:背景图纵向和横向上平铺
no-repeat：背景图不平铺
repeat-x：横向平铺
repeat-y：纵向平铺
}
4：背景图片位置：
div{
background-position: x y;
参数代表x坐标和y坐标，可以用方位名词还有精确单位
参数说明：
精确单位length：百分数，浮点数
方位名词position：top,center,left,center,right;
}
在一个盒子里面放图片有两种方法： < img src=“图片地址” alt=“”> background-image: url(图片地址);background-image方法是利用背景图片的方法这个方法比较好控制位置。
2；精确单位例子：
<style>
div {
width: 200px;
height: 190px;
background-color: pink;
background-image: url(bitbug_favicon.ico);
background-repeat: no-repeat;
background-position: 20px 50px;
/* 代表x轴20，y轴是50 */
/* 如果只写一个px则代表x轴是px y轴是center */
}
</style>
3：混合单位：第一个值是x坐标，第二个是y坐标；y从顶部开始，x从左部开始
background-position: 20px center;
5：背景图像的固定
设置背景图像是否跟着页面滚动还是固定
背景图像默认是滚动的。
<style>
div {
width: 200px;
height: 190px;
background-color: pink;
background-image: url(bitbug_favicon.ico);
background-repeat: no-repeat;
background-position: 20px center;
background-attachment: fixed/scroll;
/* scroll:为背景图像是随对象内容滚动的;
fixed是背景图像固定的 */
}
</style>
</head>
<body>
<div>
<p>123</p>
<p>345</p>
<p>345</p>
<p>778</p>
</div>
</body>
//这个里面如果加fixed则文字滚动，图像不滚动
6：背景复合写法：background：背景颜色 背景图片地址 背景平铺 背景图片滚动 背景图片位置。
7：背景色半透明：是指让盒子背景半透明，盒子内容不受影响
最后一个参数是alpha透明度，取值范围在0~1之间
background: rgba(0, 0, 0, 0.3);
css三大特性：
层叠性 继承性 优先级
重叠性：
样式冲突就有层叠性，样式无冲突就没有；
继承性：
子标签继承父标签的：
行高的继承：
<style>
body {
color: pink;
font: 12px/24px "微软雅黑";
font: 12px/1.5 "微软雅黑";
}
div {
/* 子元素继承了父元素body的行高1.5 这个1.5是当前元素font-size的1.5倍 */
font-size: 14px;
}
p {
/* 子元素继承了父元素body的行高1.5 这个1.5是当前元素font-size的1.5倍 */
font-size: 15px;
}
/* li没有指定文字大小但是会继承body的文字大小为12px */
</style>
</head>
<body>
<div>
五年时间
</div>
<p>龙生龙老鼠生的孩子会打洞</p>
<ul>
<li>没有指定文字大小</li>
</ul>
</body>
优先级：
继承的权重是0；
权值的叠加：
如果是复合选择器就会进行权重叠加
盒子模型
1：border：
用来设置盒子的边款
边款：边框宽度，边款样式，边款颜色
div{
border-width: ;边框粗细
border-style: ;边框样式
border-color: ;边框颜色
}
border-style：solid 实线边框 /dashed虚线边框 /dotted点线边框
边框复合写法：
border:1px solid red;没有顺序
边框分开写法：
border-top：1px solid red 只写上边框 其他也是一样意思
表格的细线边框：border-collapse
/* 给table加了边款，给每一个单元格加了边款 */
table,
th,
td {
border: 1px solid red;
border-collapse: collapse;
/* 表示相邻边款合并在一起 */
text-align: center;
}
</style>
</head>
<body>
<table cellspacing="0">
<thead>
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
</tr>
</thead>
<tbody>
<tr>
<td>4</td>
<td>5</td>
<td>6</td>
</tr>
</tbody>
</table>
</body>
边框会影响实际盒子大小；1：测量盒子大小时不量边框2：如果测量时候包含了边框则需要width、height减去边框宽度。
padding
外边距：边框和内容之间距离，内边距。一个盒子与里面内容（文字或者内盒子）之间的距离；
div{
padding-left: ;左边距
padding-right: ;右边距
padding-top: ;上边距
padding-bottom: ;下边距
}
padding复合写法：
div {
padding: 5px;代表左右内边距都是5像素
padding: 5px 10px;代表上下内边距为5px 左右内边距5像素
padding: 5px 10px 20px;代表上内边距为5px 左右内边距5像素 下内边距为20px
padding: 5px 10px 20px 30px;上边距5px 右10 下20 左30
}
padding影响盒子实际大小；
假设padding=20px，则盒子宽度增加=20+20；高度增加=20+20；
如果盒子已经有了宽度和高度，此时再指定内边框，就会撑大盒子。
解决方案：让weight和height减去多出来的内边距。
padding值影响盒子大小好处：每一个盒子装的字数不一样，可以借padding撑开盒子，使其文字距离左侧的距离相等。
<style>
.nav {
height: 41px;
line-height: 41px;
border-top: 5px solid gold;
border-bottom: 1px solid gray;
background-color: #fff;
}
.nav a {
display: inline-block;
height: 41px;
padding: 0 20px;
font-size: 12px;
text-decoration: none;
font-style: normal;
color: #000;
}
.nav a:hover {
background-color: #eee;
color: gold;
}
</style>
</head>
<body>
<div class="nav">
<a href="#">新浪导航</a>
<a href="#">手机客户端</a>
<a href="#">移动客户端</a>
<a href="#">微博</a>
<a href="#">都可以</a>
</div>
</body>
padding不会撑开盒子案例：当这个盒子没有指定width或者height时候，则此时padding不会撑开盒子大小。指定了width则只撑开width，指定了height就只撑开height。
margin
：外边距：盒子与盒子之间距离
div{
margin-left: ;左外边距
margin-right: ;右外边距
margin-top: ;上外边距
margin-bottom: ;下外边距
}
margin简写方式和padding一样；
使用margin也会撑开盒子。
（margin应用：块级盒子水平居中对齐 但是盒子必须指定了宽度 把左右外边距设置为auto）
div {
width: 500px;
height: 300px;
background-color: pink;
margin: 0 auto;
}
以上方法是让块元素水平居中，让行内元素和行元素水平居中，只需要给其父元素加上text-align：center。
（嵌套块元素垂直外边距的坍塌：当子盒子想和父盒子上面隔开一段距离所以用了margin-top，这样是不能实现的。解决方法1：给父元素加一个上边框border-top：1px solid transparent 2：可以给父元素加内边距 不使用外边距3：加overflow ：hidden）
消除内外边距
网页元素自带内外边距：
*是通配符选择器。消除所有元素的内外边距
这句话是css第一行代码。
*{
padding: 0;
margin: 0;
}
ps使用
圆角边框
语法
border-radius:数值px/%;
数值越大，边款弧度越明显
border-radius:设置为盒子高度一半；
此时盒子变成圆型；
border-radius就为圆的半径。
盒子阴影
box-shadow: ;
默认是外阴影，可以改成内阴影。
浮动
：可让多个块元素在一行上面显示。
页面布局：多个块元素纵向显示找标准流，多个块元素横向显示找浮动。
<style>
选择器{float：属性值}；
属性值：none:元素不浮动
left：元素向左浮动
right：元素向右浮动
</style>
浮动特性
：1：浮动元素会脱离标准流（脱离普通流的控制移动到指定位置，浮动盒子不再保留原来位置）（若有两个横向盒子（标准流），只给上面那个加浮动，下面那个没有加，则下面那个会占领上面那个位置）。
：2：浮动元素会一行内显示并且元素顶部对齐，且之间无间隙
：3：浮动元素会具有行内块元素特性（意思是如果给一个行元素加了浮动就可以设置其宽高）（如果块盒子没有设置宽度，默认是和父级一样高，但是加了浮动就会根据内容来决定）
1.6：浮动盒子经常和标准流父级搭配使用：先用标准流父级来排列上下位置，之后内部子元素采用浮动排列左右
三个白色盒子为内部浮动子元素，蓝色大盒子为标准流父级。
浮动布局注意点：
1：浮动和标准流和父盒子搭配。2：一个元素浮动了，理论上其他兄弟元素也应该浮动。
为什么要清除浮动：我们前面浮动元素有一个标准流的父元素，他们有一个共同特点，都是有高度的，因为如果不加高度因为子元素加了浮动会浮起来则父元素高度会变成0，但是所有的父盒子都应该给高度吗？有时候父盒子不方便给高度，我们理想的是让子盒子撑开父盒子，有多少孩子，我父盒子就有多高。
清除浮动的本质：清除浮动元素造成的影响：如果父盒子本来就有高度就不要清除浮动（清除浮动后，父级会根据浮动子盒子自动检测高度，父级有了高度就不会影响下面标准流了。
语法
选择器{
clear: 属性值;
属性值=left/right/both清除左浮动，清除右浮动，清除左右浮动
}
2：清除浮动方法：
1：额外标签法：在浮动元素末尾加一个空标签（标签必须为块级元素），例如< div style="clear.both>< /div>
.cl{
clear: both;
}
</style>
</head>
<body>
<div class="box">
<div class="damao"></div>
<div class="ermao"></div>
<div class="cl"></div>
</div>
</body>
2给父级加overflow属性。
div{
这句可以清除浮动
overflow:hidden;
}
3父级添加after伪元素。
4父级添加双伪元素。
css定位
为什么需要定位：某个元素可以自由的在一个盒子内移动位置，并且可以压住其他盒子
1：浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子
2：定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕某个位置，并且可以压住其他盒子。
定位组成：=定位模式+边偏移
定位模式：指定一个元素在文档中定位方式，边偏移决定该元素最终位置`。
通过css的position属性来设置
| static | 静态定位 |
|---|---|
| relative | 相对定位 |
| absolute | 绝对定位 |
| `fixed | 固定定位 |
边偏移：
| top | 顶端偏移量，定义元素相对于其父元素上边线的距离 |
|---|---|
| bottom | 底部偏移量，定义元素相对于其父元素下边线的距离 |
| left | 左侧偏移量，定义元素相对于其父元素左边线的距离 |
| right | 右边偏移量，定义元素相对于其父元素右边线的距离 |
静态定位
static：元素的默认定位方式，无定位的意思。
选择器{position：static；}
静态定位按照标准流的特性摆放位置，它没有边偏移
静态定位在布局时候用的很少
相对定位relative
原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它
相对定位是元素在移动位置的时候，相对于它原来的位置来说移动的。
相对定位最典型应用是用来给绝对定位当爹的（子绝父相）
选择器{position：relative}
绝对定位
绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的。
1如果没有祖先元素或者祖先（可以是爸爸也可以是爷爷）元素没有定位，则以浏览器为准定位。
2：绝对定位不再占有原来位置，它不会影响下面盒子的位置
选择器{position：absolute；}
问题
相对定位和绝对定位有什么使用场景：
子绝父相：
例如这个给两个小黑盒子加绝对定位，给白色盒子加相对定位，因为小黑盒子是绝对定位是不占位置的所以红盒子才能这样子摆放，红盒子才可以占黑盒子位置
1：子级绝对定位，不会占位置，可以放到父盒子里面任何一个地方，并且不会影响其他兄弟盒子。
2：父盒子一定要加相对定位给子盒子限制在里面，而且其父盒子一定要占位置。
固定定位：
固定定位是元素固定于浏览器可视区的位置，主要使用场景，可以在浏览器页面滚动时元素的位置不会改变。
选择器{position：fixed；}
以浏览器可视窗口为参照点移动元素，和父元素无关系，不随滚动条滚动，固定定位不占原来位置。
黏性定位：
选择器{position：sticky；top=10px}
以浏览器可视窗口为参照点移动元素，黏性定位占原来位置。必须添加 top right left bottom其中一个才有效
定位叠放次序：z-index：在使用定位布局时候，可能会出现盒子重叠情况，此时可以使用z-index来控制盒子前后次序
选择器{z-index：1；}
数值越大盒子越往上
定位拓展：让绝对定位盒子在整个浏览器中居中：不能用margin：0 auto。
方法：
水平居中加垂直居中
.box2 {
position: absolute;
/* 水平居中 */
/* 1:让left走百分之50，走到父容器宽度一半， */
left: 50%;
/* 再往左边走自己盒子宽度百分之50% */
/* margin负值是往左走 */
margin: -100px;
/* 垂直居中 */
/* 1:让top走百分之50，走到父容器高度一半 */
top: 50%;
/* 再往上边走自己盒子高度百分之50% */
margin-top: -100px;
width: 260px;
height: 200px;
background-color: red;
}
2：定位的特殊特性：1：行内元素添加绝对或者固定定位，也可直接给其设置高度和宽度。
2：块级元素添加绝对或者固定队伍，如果不给宽度或者宽度，默认大小是内容大小。
3：定位：&：浮动元素不会压住标准流的文字。会同一行显示
￥：绝对定位会压住标准流文字。
元素的显示和隐藏
本质：让一个元素在页面里面显示或者隐藏起来。
1：display显示隐藏
2：visibility显示隐藏
3：overflow溢出部分隐藏
display属性：
1、display:none；隐藏元素，位置不会保存，在一个盒子里面加这个，盒子会消失位置也不会保留。
2、display:block；转化块元素同时还有显示元素意思
visibility属性：
1：visibility：visible 元素可视
2：visibility：hidden元素隐藏，隐藏后继续占原来位置。
3：visibility；none 元素隐藏，不保留原来位置
overflow溢出部分属性：
1；overflow：visible 默认溢出部分显示
2：overflow：auto 在超出内容时候加滚动条
3：overflow：hidden 溢出部分隐藏
4：overflow：scroll不超出也显示滚动条
css高级技巧：
精灵图
为什么要学习精灵图：一个网页中往往会应用很多小的背景图作为修饰，当网页中图过多时候，服务器会频繁地接受和发送请求图片，造成服务器请求压力过大，这将大大降低页面加载速度。
因此，为了有效的减少服务器接受和发送请求次数，提高页面加载速度，出现了css精灵技术。
精灵图的使用：精灵图技术主要针对于背景图片的使用，就要把多个小图片整合到一张大图片里面。
移动背景图片位置，此时可以使用background-position
移动的距离就是这个目标图片的x和y坐标，注意网页的坐标有所不同，x轴右边为正，y轴向下为正。
例如这个就是一个精灵图，如果要使用这个图片里面某一个小图标，就要用上述方法。
精灵图代码：
字体图标：
主要用于显示网页中通用，常用的一些小图标，其本质展示的是字体。
如果遇到结构样式比较复杂的就用精灵图。
1：字体图标的下载
2：字体图标的引入
3：字体图标的追加
1：网站lcomoon , lconfont
2:下载完以后，注意原先的文件不要删，后面会用
（1：把下载包放在fonts文件夹放入根目录里面）
3：通过css把文件引入我们页面。
css三角
用户界面样式：
鼠标样式：
li{
cursor:pointer;
}
设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状
| 属性值 | 描述 |
|---|---|
| default | 小白 默认 |
| pointer | 小手 |
| move | 移动 |
| text | 文本 |
| not-allowed | 禁止 |
表单的轮廓线：
给表单添加 outline：0；或者outline：none，样式之后，就可以去掉默认的蓝色边款。
<style>
input {
outline: none;
}
</style>
</head>
<body>
<input type="text">
</body>
防止拖拽文本域resize：
<style>
textarea {
resize: none;
}
</style>
</head>
<body>
<textarea name="" id="" cols="30" rows="10"></textarea>
</body>
vertical-align属性：经常使用于设置图片或者表单（行内块元素）和文字垂直对齐
用于设置一个元素的垂直对齐方式，只针对行内元素或行内块元素
vertical-align: baseline ,top ,middle,bottom;
| 值 | 描述 |
|---|---|
| baseline | 默认，元素放在父元素的基线上 |
| top | 把元素的顶端与行中最高元素的顶端对齐 |
| middle | 把元素放置在元素的中部 |
| bottom | 把元素的顶端与行中最低的元素顶端对齐 |
解决图片底部默认空白缝隙问题：
原因行内块元素会默认会和文字基线对齐。
1：给图片添加vertical-align: top ,middle,bottom;属性
2：把图片转换为块元素
单行文字溢出省略号显示：
必须满足以下条件
/* 先强制一行内显示文本 */
white-space:nowrap;
/* 超出部分隐藏 */
overflow：hidden；
/* 文字用省略号代替超出部分 */
text-overflow：ellipsis
<style>
div {
width: 150px;
height: 80px;
background-color: pink;
margin: 0 auto;
/* 这个单词意思是如果文字显示不开就自动换行 */
white-space: normal;
/*1: 这个单词意思是如果文字显示不开也必须强制一行内显示 */
white-space: nowrap;
/*2: 溢出部分隐藏 */
overflow: hidden;
/* 3:超出部分省略号显示 */
text-overflow: ellipsis;
}
</style>
</head>
<body>
<div>
此处省略一万字，哈哈哈
</div>
</body>
多行文字溢出省略号显示：
div {
width: 150px;
height: 80px;
background-color: pink;
margin: 0 auto;
overflow: hidden;
text-overflow: ellipsis;
/* 先伸缩盒子模型显示 */
display: -webkit-box;
/* 限制在一个块元素显示的文本行数 */
-webkit-line-clamp: 2;
/* 设置或者检索伸缩盒对象的子元素的排列方式 */
-webkit-box-orient: vertical;
}
</style>
</head>
<body>
<div>
此处省略一万字，哈哈哈
</div>
</body>
布局技巧
margin负值的运用：
情景：两个盒子并列显示时候，由于一个盒子border-right与另一个盒子border-left并列会使边款宽度加倍，这时候我们可以利用margin负值，
让每个盒子margin往左移动1px，正好可以压住相邻盒子边款。
<style>
ul li {
width: 150px;
height: 200px;
border: 1px solid red;
list-style: none;
float: left;
margin-left: -1px;
/* 会让盒子往左边走1px */
}
</style>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
</ul>
</body>
377
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
