CSS属性操作
1.文本
文本颜色：color，颜色属性被用来设置文字的颜色，颜色是通过CSS经常指定的，其格式有：
1.十六进制：#FF0000；
2.RGB值：RGB(255,0,0)；
3.颜色名称：red；水平对其方式：text-align属性规定元素中的文本的水平对齐方式；
1.left：文本排列到左边；默认值：由浏览器决定；
2.right：文本排列到右边；
3.center：文本排列到中间；
4.justify：文本两端对齐；文本其他操作：
text-align：center ???文本居中font-size: 10px;line-height: 200px; ??文本行高 通俗的讲，文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比vertical-align:－4px ?设置元素内容的垂直对齐方式 ,只对行内元素有效，对块级元素无效text-decoration:none ??????text-decoration 属性用来设置或删除文本的装饰。主要是用来删除链接的下划线font-family: ‘Lucida Bright‘font-weight: lighter/bold/border/font-style: oblique 或者italic...(设置字体的样式为斜体)text-indent: 150px; ?????首行缩进150pxletter-spacing: 10px; ?字母间距word-spacing: 20px; ?单词间距text-transform: capitalize/uppercase/lowercase ; 文本转换，用于所有字句变成大写或小写字母，或每个单词的首字母大写2.背景属性
- background-color：背景颜色
- background-image：背景图片连接
- background-repeat：x-轴平铺
- background-position：调整背景的位置
background-color: cornflowerblue； background-image: url(‘1.jpg‘)； background-repeat: no-repeat；(repeat:平铺满) background-position: right top（20px 20px）；简写：background:#FFFFFF url(‘1.png‘) no-repeat right top;
背景调试小黄人的眼睛
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>背景处理</title> ???<style> ???????.c1{ ??????????width: 300px; ??????????height: 200px; ??????????border: 1px solid red; ??????????background: url("xhr.jpg") ?-206px -29px; ??????????/*可在那个网页上右击点击检查，调试*/ ???????????/*background-position: center; */ ??????????/*定位*/ ???????} ???</style></head><body> ???<div class="c1"></div></body></html>3.外边框(margin)和内边距(padding)
1.盒子模型
- margin：用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉上达到相互隔开的目的；
- padding：用于控制内容与边框之间的距离；
- border：围绕在内边距和内容外的边框；
- content：盒子的内容，显示文本和图像；
2.margin(外边距)
单边外边距属性
margin-top:100px;margin-bottom:100px;margin-right:50px;margin-left:50px;属性简写
margin:10px 20px 20px 10px； ???????上边距为10px ???????右边距为20px ???????下边距为20px ???????左边距为10pxmargin:10px 20px 10px; ???????上边距为10px ???????左右边距为20px ???????下边距为10pxmargin:10px 20px; ???????上下边距为10px ???????左右边距为20pxmargin:25px; ???????所有的4个边距都是25px居中应用
margin:0 auto;3.padding(内边距)
单独使用填充属性可以改变上下左右的填充。缩写填充属性也可以使用，一旦改变都该改变，其设置同margin；
思考1：body的外边距
边框在默认情况下辉定位于浏览器的左上角，但是并没有紧贴着浏览器窗口的边框，这是因为body本身也是一个盒子(外层还有html)。在默认情况下，body距离html会有若干像素的margin，具体数值因浏览器不同而不尽相同，所以body中的盒子不会紧贴浏览器窗口的边框，为了检验这一点加上如下样式：
body{ ???border:1px solid; ???background-color:cadetblue;}解决方法：
body{ ???margin:0;}思考2：margin collapse(边界塌陷或边界重叠)
1、兄弟div：上面div的margin-bottom和下面div的margin-top会塌陷，也就是会取上下两者margin里面值最大的作为显示值；
2、父子div：如果父级div中没有border、padding、inline content，子级div的margin会一直向上赵，直到找到某个标签包括border、padding、inline content中的一个，然后按此div进行margin；
父级塌陷问题
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Collapse</title> ???<style> ???????body{ ???????????margin: 0px; ???????} ???????.div1{ ???????????background-color: rebeccapurple; ???????????width: 300px; ???????????height: 300px; ???????????overflow: hidden; ???????} ???????.div2{ ???????????background-color: red; ???????????width: 200px; ???????????height: 200px; ???????????margin-bottom: 40px; ???????????margin-top: 20px; ???????} ???????.div3{ ???????????background-color: green; ???????????width: 100px; ???????????height: 100px; ???????????margin-top: 20px; ???????} ???</style></head><body> ???<div style="background-color: bisque; width: 300px; height: 300px;"></div> ???<div class="div1"> ???????<div class="div2"></div> ???????<div class="div3"></div> ???</div></body></html>解决方法：
overflow:hidden;4.float属性
布局关键点：如何能够让可以调节长度的元素(标签)在一行显示？如果上一个元素是浮动的，那么就紧贴着；如果上一个不是浮动的，那么就保持垂直距离不变；
1.基本浮动规则
block元素通常被实现为独立的一块，独占一行，多个block元素会各自新起一行，默认block元素宽度自动填满其父元素宽度。block元素可以设置width、height、margin、padding属性；
inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。inline元素设置width、height属性无效；
- 常见块级元素：div、form、table、p、pre、h1-h6、dl、ul等；
- 常见内联元素：span、a、strong、em、label、input、select、textarea、img、br等；
文档流，指的是元素排版布局过程中，元素会自动从左往右，从上往下的流式排列；
脱离文档流，也就是将元素从普通的布局排版中拿走，其它盒子再定位的时候，会当作脱离文档流的元素不存在而进行定位；
假如：某个div元素A是浮动的，如果A元素上的一个元素也是浮动的，那么A元素会跟随在上一个元素的后面(如果一行放不下两个元素，那么A元素会被挤到下一行)；如果A元素上的一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。此外，浮动的边框之后的block元素会认为这个框不存在，但其中的文本以仍然会给这个元素让出位置，浮动边框之后的inline元素会为这个框空出位置，然后按顺序排序；
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????*{ ???????????margin: 0px; ???????} ???????.r1{ ???????????width: 300px; ???????????height: 100px; ???????????background-color: red; ???????????float: left; ???????} ???????.r2{ ???????????width: 200px; ???????????height: 200px; ???????????background-color: aqua; ???????} ???????.r3{ ???????????width: 100px; ???????????height: 200px; ???????????background-color: green; ???????????float: left; ???????} ???</style></head><body> ???<div class="r1"></div> ???<div class="r2"></div> ???<div class="r3"></div></body></html>2.非完全脱离文档
左右结构div盒子重叠现象，一般是由于相邻两个div一个使用浮动另一个没有使用浮动，这样会导致div不是在同一个"平面"上，但内容不会造成覆盖现象，私有div形成覆盖现象：
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????*{ ???????????margin: 0; ???????} ???????.r1{ ???????????width: 100px; ???????????height: 100px; ???????????background-color: #7A77C8; ???????????float: left; ???????} ???????.r2{ ???????????width: 200px; ???????????height: 200px; ???????????background-color: wheat; ???????} ???</style></head><body> ???<div class="r1"></div> ???<div class="r2">region two</div></body></html>解决方法：要么都不使用浮动；要么都使用浮动；要么对没有使用浮动的div设置margin样式。
3.清除浮动
clear语法
clear：none | left | right | both- 1.clear：left清除左边的浮动；
- 2.clear：both清除左右两边的浮动；
注意：排序的时候是一个标签已给标签地排序，如果上一个是浮动的，就紧贴上一个；如果上一个不是浮动的，就和上一个保持垂直不变；
5.列表属性
去掉列表前面的标志：ul li{list-style:none;}
去掉列表前面的空格：ul{padding:0}
上面两行也可以写成：*{margin:0;padding:0;}
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????ul li{ ???????????font-family: 华文中宋; ???????????list-style: none; //去掉点 ???????????/*list-style: circle;//空心圆*/ ???????????/*list-style: disc;//实心圆（默认也是实心圆）*/ ???????} ???????ul{ ???????????padding: 0; //把字体移到前面 ???????} ???</style></head><body><div> ???<ul> ???????<li>第一章</li> ???????<li>第二章</li> ???????<li>第三章</li> ???????<li>第四章</li> ???</ul></div></body></html>6.display属性
display属性
- 1.将块级标签设置成内联标签：display：inline；
- 2.将内联标签设置成块级标签：display：block；
- 3.内联块级标签：像块级标签一样可以设置长度和高度，也可以像内联标签一样在一行显示：display：inline-block；
- 4.将不像让用户看到的属性隐藏：display：none；
- 5.visibility：hidden，也是隐藏；
注意：visibility可以隐藏某个元素，但隐藏的元素仍需占用与未隐藏之前一样的空间，也就是说，该元素被隐藏了，仍然会影响页面布局；display：none可以隐藏某个元素，且隐藏的元素不会占用任何空间，也就是说，该元素不但被隐藏了，且该元素占用的空间也会从页面布局中消失。
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????.c1{ ???????????width: 100px; ???????????height: 100px; ???????????background-color: rebeccapurple; ???????} ???????.c2{ ???????????width: 100px; ???????????height: 100px; ???????????background-color: burlywood; ???????} ???????.c3{ ???????????width: 100px; ???????????height: 100px; ???????????background-color: crimson; ???????????display: inline; ???????} ???????.c4{ ???????????width: 100px; ???????????height: 100px; ???????????background-color: gray; ???????} ???????.s1{ ???????????width: 100px; ???????????height: 100px; ???????????background-color: royalblue; ???????????/*visibility: hidden;*/ ????// 隐藏了其他的不会顶上去 ???????????display: none; ?????// 隐藏了其他的会顶上去 ???????} ???</style></head><body> ???<div class="c4">十年之后</div> ???<span class="s1">我们还是朋友</span> ???<div class="c1">还可以温柔</div> ???<div class="c2">还可以温柔</div> ???<div class="c3">还可以温柔</div></body></html>7.position(定位)属性
position四种属性：
- static：默认位置；
- fixed：完全脱离文档流，固定位置(以可视窗口为参照物)；
- relative：相对位置(参照的是自己本身的位置)，没有脱离文档流，可以使用top、left进行定位；
- absolute：绝对定位，脱离文档流(参照已定位的父级标签定位，如果找不到会按照body的去找)；
注意：将定位标签设置为absolute，将其父级标签设置为定位标签relative
固定位置实例
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>固定位置实例</title> ???<style> ???????.c1{ ???????????background-color: white; ???????????width: 100%; ???????????height: 1000px; ???????} ???????.returntop{ ???????????width: 100px; ???????????height: 40px; ???????????background-color: gray; ???????????/* 透明度 */ ???????????/*opacity: 0.4;*/ ???????????color: black; ???????????text-align: center; ???????????line-height: 40px; ???????????position: fixed; ???????????bottom: 50px; ???????????right: 20px; ???????} ???</style></head><body> ???<div class="c1"></div> ???<div class="returntop">返回顶部</div></body></html>相对位置实例
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>相对定位</title> ???<style> ???????*{ ???????????margin: 0px; ???????} ???????.box1,.box2,.box3{ ???????????width: 200px; ???????????height: 200px; ???????} ???????.box1{ ???????????background-color: blue; ???????????position: relative; ???????} ???????.box2{ ???????????background-color: darksalmon; ???????????position: relative; ???????????/*position: absolute;*/ ???????????left: 200px; ???????????/*right: 200px;*/ ???????????top: 200px; ???????} ???????.box3{ ???????????background-color: lime; ???????} ???</style></head><body> ???<div class="box1"></div> ???<div class="box2"></div> ???<div class="box3"></div></body></html>绝对位置实例
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>绝对定位</title> ???<style> ???????.father{ ???????????position: relative; ???????} ???????*{ ???????????margin: 0px; ???????} ???????.box1,.box2,.box3{ ???????????width: 200px; ???????????height: 200px; ???????} ???????.box1{ ???????????background-color: blue; ???????????position: relative; ???????} ???????.box2{ ???????????background-color: darksalmon; ???????????/*position: relative;*/ ???????????position: absolute; ???????????left: 200px; ???????????/*right: 200px;*/ ???????????top: 200px; ???????} ???????.box3{ ???????????background-color: lime; ???????} ???</style></head><body> ???<div class="box1"></div> ???<div class="father"> ???????<div class="box2"></div> ???</div> ???<div class="box3"></div></body></html>float和position的区别：float是半脱离文档；position是全脱离文档。
8.其他常用属性
1.去掉下划线：text-decoration：none；
2.加上下划线：text-decoration：underline；
3.调整文本和图片位置(设置元素的垂直对齐方式)：vertical-align：-20px；
4.外边距：margin；
5.内边距：padding；
6.内联标签是不可以设置长度和高度的，有时候需要把内联标签变成块级标签或者块级内联标签，这就用到display属性了：
7.隐藏的两个方法：display：none；visibility：hidden；
8.隐藏溢出的两个方法：overflow：auto；overflow：scroll；(滚动机制)
9.文本居中：text-align：center(水平居中)；line-height(垂直居中)；
10.z-index：属性设置元素的堆叠顺序，拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素前面；
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>元素堆叠</title> ???<style> ???????.imag1{ ???????????position: absolute; ???????????left: 0px; ???????????top: 0px; ???????????z-index: -10; ???????} ???????.imag2{ ???????????position: absolute; ???????????left: 0px; ???????????top: 0px; ???????????z-index: -3; // 值越大越往前 ???????} ???????.imag3{ ???????????position: absolute; ???????????left: 0px; ???????????top: 0px; ???????????z-index: -5; ???????} ???</style></head><body> ???<div class="imag3"><img src="作业/1.jpg" ></div> ???<div class="imag2"><img src="作业/2.jpg" ></div> ???<div class="imag1"><img src="作业/3.jpg" ></div></body></html>11.透明度：opacity：0.3；
12.边框弧度：border-radius：50%；
13.去除列表前面的标志：list-style：none；
14.对其上面和左边最顶部：padding：0；margin：0；
15.字体加粗：font-weight：900；
几个实例
1.图片切换
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>Title</title> ???<style> ???????*{ ???????????padding:0; ???????????margin: 0; ???????} ???????.outer{ ???????????width:790px; ???????????height: 340px; ???????????border: solid 1px red; ???????????margin: 0 auto; ???????????margin-top: 40px; ???????????position: relative; ???????} ???????ul{ ???????????list-style: none; ???????????position: absolute; ???????????top: 0; ???????????left:0; ???????} ???????.com{ ???????????position: absolute; ???????????display: none; ???????????/*visibility: hidden;*/ ???????} ???????.num{ ???????????position: absolute; ???????????top: 300px; ???????????left: 330px; ???????} ???????.num li{ ???????????display: inline-block; ???????????width: 20px; ???????????height: 20px; ???????????color: black; ???????????background-color: white; ???????????border-radius: 50%; //边框弧度 ???????????line-height: 20px; ???????????text-align: center; ???????} ???????.btn{ ???????????position: absolute; ???????????width: 40px; ???????????height: 60px; ???????????background-color: grey; ???????????opacity: 0.5; //透明度 ???????????color: black; ???????????font-weight: 900; ?//加粗 ???????????text-align: center; ???????????line-height: 60px; ???????????top:50%; ???????????margin-top: -30px; ???????} ???????.leftbtn{ ???????????left:0; ???????} ????????.rightbtn{ ????????????right:0; ???????} ???</style></head><body><div class="outer"> ???<ul class="img"> ???????<li><a href=""><img src="1.jpg" ></a></li> ???????<li class="com"><a href=""><img src="2.jpg" ></a></li> ???????<li class="com"><a href=""><img src="3.jpg" ></a></li> ???????<li class="com"><a href=""><img src="4.jpg" ></a></li> ???????<li class="com"><a href=""><img src="5.jpg" ></a></li> ???????<li class="com"><a href=""><img src="6.jpg" ></a></li> ???</ul> ???<ul class="num"> ???????<li></li> ???????<li></li> ???????<li></li> ???????<li></li> ???????<li></li> ???</ul> ???<div class="leftbtn btn"> < </div> ???<div class="rightbtn btn"> > </div></div></body></html>2.后台管理布局
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>后台管理布局</title> ???<style> ???????*{ ???????????margin: 0; ???????} ???????a{ ???????????text-decoration: none; ???????} ???????.header{ ???????????width: 100%; ???????????height: 44px; ???????????background-color: #2459a2; ???????} ???????.title li{ ???????????width: 100px; ???????????height: 80px; ???????????list-style: none; ???????????text-align: center; ???????????line-height: 80px; ???????????margin-top: 20px; ???????????padding: 50px; ???????????background-color: blue; ???????} ???????.leftmenu .title a{ ???????????font-size: 18px; ???????????color: white; ???????} ???????.leftmenu{ ???????????width: 300px; ???????????background-color: grey; ???????????position: fixed; ???????????top: 44px; ???????????left:0; ???????????bottom: 0; ???????} ???????.con{ ???????????position: fixed; ???????????top: 44px; ???????????left: 300px; ???????????right:0; ???????????bottom: 0; ???????????background-color: darksalmon; ???????????overflow: scroll; ???????} ???</style></head><body><div class="header"></div><div class="content"> ???<div class="leftmenu"> ???????<ul class="title"> ???????????<li><a href="">菜单一</a></li> ???????????<li><a href="">菜单二</a></li> ???????????<li><a href="">菜单三</a></li> ???????</ul> ???</div> ???<div class="con"> ???????<h1>厉害了，我的国</h1> ???????<h1>厉害了，我的国</h1> ???????<h1>厉害了，我的国</h1> ???????<h1>厉害了，我的国</h1> ???????<h1>厉害了，我的国</h1> ???????<h1>厉害了，我的国</h1> ???????<h1>厉害了，我的国</h1> ???????<h1>厉害了，我的国</h1> ???????<h1>厉害了，我的国</h1> ???????<h1>厉害了，我的国</h1> ???????<h1>厉害了，我的国</h1> ???????<h1>厉害了，我的国</h1> ???????<h1>厉害了，我的国</h1> ???????<h1>厉害了，我的国</h1> ???????<h1>厉害了，我的国</h1> ???????<h1>厉害了，我的国</h1> ???????<h1>厉害了，我的国</h1> ???????<h1>厉害了，我的国</h1> ???????<h1>厉害了，我的国</h1> ???????<h1>厉害了，我的国</h1> ???</div></div></body></html>3.遮盖层
<!DOCTYPE html><html lang="en"><head> ???<meta charset="UTF-8"> ???<title>遮罩层</title> ???<style> ???????.backgroup{ ???????????width: 100%; ???????????height: 2000px; ???????} ???????.zzc{ ???????????position: fixed; ???????????bottom: 0; ???????????top:0; ???????????left:0; ???????????right:0; ???????????background-color: grey; ???????????opacity: 0.4; ???????} ???</style></head><body><div class="backgroup"> ???<p>厉害了，我的国</p> ???<p>厉害了，我的国</p> ???<p>厉害了，我的国</p> ???<p>厉害了，我的国</p> ???<p>厉害了，我的国</p> ???<p>厉害了，我的国</p> ???<p>厉害了，我的国</p> ???<p>厉害了，我的国</p> ???<p>厉害了，我的国</p> ???<p>厉害了，我的国</p></div><div class="zzc"></div></body></html>前端基础：CSS属性操作
原文地址：https://www.cnblogs.com/love9527/p/9063386.html