三 CSS的常用属性
1 颜色属性
<div style="color:blueviolet">ppppp</div>
<div style="color:#ffee33">ppppp</div>
<div style="color:rgb(255,0,0)">ppppp</div>
<div style="color:rgba(255,0,0,0.5)">ppppp</div>
字体属性
font-size: 20px/50%/larger
font-family:'Lucida Bright'
font-weight: lighter/bold/border/
<h1 style="font-style: oblique">老男孩</h1>
设置字体样式
属性：font-style
取值：
normal 正常显示
italic 使用斜体
oblique 文本倾斜，出现斜体效果
文本属性
文本颜色
属性：color
取值：颜色值
文本水平对齐方式
属性：text-align
取值：left(默认值）/ center / right / justify(两端对齐)
设置行高
属性：line-height
取值：像素值 或无单位的数值，表示是当前文本大小的倍数
line-height:32px;
p{
font-size:18px;
line-height:2;
//行高为字体大小的2倍 36px
}
常用：使用行高设置文本的垂直居中
用法：将元素的行高与高度保持一致
div{
width:100px;
height:50px;
line-height:50px;
}
文本的装饰线
属性：text-decoration
取值：
underline：下划线
overline：上划线
line-through：删除线
none：针对超链接，取消默认下划线
尺寸单位
px - 像素单位，默认单位
% - 参照父元素对应属性的值进行获取
--------
in -inch 英寸 1in = 2.54cm
pt -磅 1pt = 1/72 in
cm
mm
尺寸属性
width height
用来改变元素的宽高大小
取值：px为单位的数值，或者%
注意：
块元素和行内块元素都可以设置宽高大小
行内元素不起作用，大小由内容自适应
3 背景属性
background-color: cornflowerblue
background-image: url('1.jpg');
background-repeat: no-repeat;(repeat:平铺满)
background-position: right top（20px 20px）;(横向：left center right)(纵向：top center bottom)
注意：如果将背景属性加在body上，要记得给body加上一个height，否则结果异常，这是因为body为空，无法撑起背景图片；另外，如果此时要设置一个width＝100px，你也看不出效果，除非你设置出html。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
html{
background-color: antiquewhite;
}
body{
width: 100px;
height: 600px;
background-color: deeppink;
background-image: url(1.jpg);
background-repeat: no-repeat;
background-position: center center;
}
</style>
</head>
<body>
</body>
</html>
通过调整背景图片的位置，来显示不同的图标
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
span{
display: inline-block;
width: 18px;
height: 20px;
background-image: url("http://dig.chouti.com/images/icon_18_118.png?v=2.13");
background-position: 0 -100px;
}
</style>
</head>
<body>
<span></span>
</body>
</html>
4 文本属性
font-size: 10px;
text-align: center; 横向排列
line-height: 200px; 文本行高 通俗的讲，文字高度加上文字上下的空白区域的高度 50%:基于字体大小的百分比
vertical-align:－4px 设置元素内容的垂直对齐方式 ,只对行内元素有效，对块级元素无效
text-indent: 150px; 首行缩进
letter-spacing: 10px;
word-spacing: 20px;
text-transform: capitalize;
5 边框属性
border-style: solid;
border-color: chartreuse;
border-width: 20px;
简写：border: 30px rebeccapurple solid;
边框实现
边框简写
通过一个属性为四个方向设置边框
可以设置 边框的 宽度 样式 颜色
属性：border
取值：width style color(缺一不可)
width：像素为单位的数值，边框宽度
style：设置边框样式
取值：
solid：实线
dashed：虚线
dotted：点线
double：双线
color：设置边框颜色
特殊用法：
取消边框 border:noine;
单独设置某个方向的边框
属性：
border-top
border-right
border-bottom
border-left
取值：width style color
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
p{
width: 200px;
height: 50px;
border: 3px solid red;
}
h1{
width: 300px;
height: 50px;
border: 5px dashed green;
}
div{
width: 400px;
height: 50px;
border: 10px dotted blue;
}
span{
border: 3px double orange;
}
table{
border-top:10px solid red;
}
</style>
</head>
<body>
<!-- 边框 -->
<p>p元素</p>
<h1>标题元素</h1>
<div>div</div>
<span>span文本</span>
<table>
<tr>
<td>文本</td>
<td>文本</td>
<td>文本</td>
</tr>
</table>
</body>
</html>
溢出处理
溢出属性：overflow
取值：
visible 默认值，可见
hidden 隐藏，溢出部分隐藏不可见
scroll 显示滚动条，溢出时滚动条可用
auto 自动，当发生溢出时，产生滚动条并可用
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: pink;
/*对溢出部分的处理 默认显示*/
/*hidden 溢出部分不可见*/
/*overflow: hidden;*/
/*scroll 直接出现滚动条*/
/*overflow: scroll;*/
/*发生溢出时在对应的方向自动添加滚动条并可用*/
overflow: auto;
}
</style>
</head>
<body>
<!-- 溢出处理 -->
<div>
一人我饮酒醉，
醉把佳人成双对，
我们一起学猫叫，
一起喵喵喵喵喵，
奶茶变抹茶
</div>
</body>
</html>
6 列表属性
ul,ol{ list-style: decimal-leading-zero;
list-style: none; <br> list-style: circle;
list-style: upper-alpha;
list-style: disc; }
7 dispaly属性
- none 隐藏
- block
- inline
display:inline-block可做列表布局，其中的类似于图片间的间隙小bug可以通过如下设置解决：
#outer{
border: 3px dashed;
word-spacing: -8px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div2,p,a,span{
width: 100px;
height: 100px;
}
.div2{
background-color: yellow;
/*display: inline;*/
display: none;
}
p{
background-color: red;
/*转化为内敛标签*/
/*display: inline;*/
}
span{
background-color: palevioletred;
/*把内联标签改为具有块状和内联标签的属性*/
display: inline-block;
}
a{
background-color: green;
display: inline-block;
}
/*消除两个块之间的空白*/
.outer{
word-spacing: -8px;
}
</style>
</head>
<body>
<div class="div2">divvvvv</div>
<p>pppppp</p>
<!--一行显示两个-->
<div class="outer">
<span>spannnnnn</span>
<a href="#">click</a>
</div>
</body>
</html>
加入
/*消除两个块之间的空白*/
.outer{
word-spacing: -8px;
}
8 外边距和内边
- margin: 用于控制元素与元素之间的距离；margin的最基本用途就是控制元素周围空间的间隔，从视觉角度上达到相互隔开的目的。
- padding: 用于控制内容与边框之间的距离；
- Border(边框) 围绕在内边距和内容外的边框。
- Content(内容) 盒子的内容，显示文本和图像。
元素的宽度和高度:
重要: 当您指定一个CSS元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完全大小的元素，你还必须添加填充，边框和边距。
margin:10px 5px 15px 20px;-----------上 右 下 左
margin:10px 5px 15px;----------------上 右左 下
margin:10px 5px;---------------------上下 右左
margin:10px; ---------------------上右下左
下面的例子中的元素的总宽度为300px
width:250px;
padding:10px;
border:5px solid gray;
margin:10px;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div1{
width: 200px;
height: 200px;
background-color: antiquewhite;
border: 40px solid rebeccapurple;
padding: 40px;
/*margin: 20px;*/
/*margin-bottom: 40px;*/
/*margin: 10px 20px 30px 40px;*/
margin-top: 30px;
margin-bottom:40px;
}
.div2{
width: 200px;
height: 200px;
background-color: lightblue;
/*border: 20px solid red;*/
/*padding: 5px;*/
/*margin-top: 40px;*/
}
.outer{
height: 1000px;
background-color: aquamarine;
/*border: 1px red solid;*/
/*padding: 1px;*/
overflow: hidden;
}
.outer2{
width: 1000px;
height: 1500px;
background-color: firebrick;
}
body{
/*设置body的边框，线型，颜色*/
border: 2px solid darkcyan;
/*body和html之间的距离*/
margin: 0px;
}
</style>
</head>
<body>
<div class="outer2">
<div class="outer">
<div class="div1">hello div1</div>
<div class="div2"></div>
<span>uuu</span><span>ooo</span>
</div>
</div>
</body>
</html>
思考1:
边框在默认情况下会定位于浏览器窗口的左上角，但是并没有紧贴着浏览器的窗口的边框，这是因为body本身也是一个盒子（外层还有html），在默认情况下， body距离html会有若干像素的margin，具体数值因各个浏览器不尽相同，所以body中的盒子不会紧贴浏览器窗口的边框了，为了验证这一点，加上：
body{
border: 1px solid;
background-color: cadetblue;
}
解决方法：
body{
margin: 0;
}
思考2：
margin collapse（边界塌陷或者说边界重叠）
外边距的重叠只产生在普通流文档的上下外边距之间，这个看起来有点奇怪的规则，其实有其现实意义。设想，当我们上下排列一系列规则的块级元素（如段 落P）时，那么块元素之间因为外边距重叠的存在，段落之间就不会产生双倍的距离。又比如停车场
- 兄弟div：上面div的margin-bottom和下面div的margin-top会塌陷，也就是会取上下两者margin里最大值作为显示值
- 父子div
if 父级div中没有 border，padding，inline content，子级div的margin会一直向上找，直到找到某个标签包括border，padding，inline content 中的其中一个，然后按此div 进行margin ；
<!DOCTYPE html>
<html lang="en" style="padding: 0px">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0px;
}
.div1{
background-color: aqua;
width: 300px;
height: 300px;
}
.div2{
background-color: blueviolet;
width: 100px;
height: 100px;
margin: 20px;
}
</style>
</head>
<body>
<div style="background-color: cadetblue;width: 300px;height: 300px"></div>
<div class="div1">
<div class="div2"></div>
<div class="div2"></div>
</div>
</body>
</html>
解决方法：
<!DOCTYPE html>
<html lang="en" style="padding: 0px">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
margin: 0px;
}
.div1{
background-color: aqua;
width: 300px;
height: 300px;
/*父级添加下列代码*/
border:1px solid transparent;
padding:1px;
over-flow:hidden;
}
.div2{
background-color: blueviolet;
width: 100px;
height: 100px;
margin: 20px;
}
</style>
</head>
<body>
<div style="background-color: cadetblue;width: 300px;height: 300px"></div>
<div class="div1">
<div class="div2"></div>
<div class="div2"></div>
</div>
</body>
</html>
盒模型 / 框模型
-
一切元素皆为框
盒模型：定义元素在文档中实际占据的尺寸
包含内容：外边距 边框，内边距 元素尺寸
默认情况下元素最终占据的尺寸大小：
最终宽度 = 左右的外边距 + 左右的边框 + 左右的内边距 + 元素宽度
最终高度 = 上下的外边距 + 上下的边框 + 上下的内边距 + 元素高度 -
外边距
元素边框与其他元素边框之间的距离
设置元素与元素之间的距离-
属性
margin:取值：可以是像素为单位的数值，也可以是%取值情况
margin：v1;一个值表示上右下左四个方向都设置外边距
margin：v1 v2;两个值表示上下的外边距为v1，左右外边距为v2
margin：v1 v2 v3；上方的外边距为v1，下方的外边距为v3，左右外边距为v2
margin：v1 v2 v3 v4;分别设置上右下左四个方向的外边距 -
特殊用法
margin:0清除元素的默认外边距
margin:0 auto;设置元素在其父元素中水平居中
取值可以是正值也可以是负值
如果给负值，表示元素位置微调
margin:10px 20px;
margin:-10px 10px 20px -10px; -
四个方向的外边距单独设置
属性：
margin-top
margin-right
margin-bottom
margin-left -
页面中具有默认外边距的元素
-
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<style type="text/css">
body{
/*清除元素的默认外边距*/
margin: 0;
}
div{
width: 200px;
height: 200px;
background-color: red;
/*margin: 50px 0px 0px 50px;*/
/*margin: 50px;*/
/*margin: 50px 100px;*/
/* 设置元素水平居中*/
margin : 50px auto;
}
</style>
</head>
<body>
<div></div>
<h1>一级标题</h1>
<p>pyuansu</p>
<ul>
<li>ul</li>
</ul>
<ol>
<li>ol</li>
</ol>
<table>
<tr>
<td>table</td>
</tr>
</table>
<form>
<input type="text" name="">
<input type="submit" name="">
</form>
<span>span</span>
</body>
</html>
-
内边距
-
元素的内容与元素边框之间的距离
-
语法
属性：padding
取值：像素值或%- 取值情况：
padding：10px;上右下左四个方向的内边距
padding：10px 20px;设置上下左右的内边距
padding：10px 20px 30px;上 左右 下
padding:10px 20px 30px 40px;上 右 下 左
- 取值情况：
-
分别对四个方向的内边距做设置
padding-top
padding-right
padding-bottom
padding-left -
具有默认内边距的元素
olul文本框密码框按钮td
-
-
box-siziing
作用：指定盒模型的计算方式
属性：box-sizing
取值：-
content-box默认值
元素的width height 属性只规定元素内容区域的大小，如果元素设置内外边距，边框，则元素最终的尺寸要进行累加（参照盒模型公式）div{ width:200px; height:200px; border:3px solid red; padding:10px; margin:20px; }最终宽度200+32+102+202
最终高度200+32+102+202 -
border-box
元素的width height属性，设置的是包含边框，内边距和内容部分总共的尺寸div{ width:200px; height:200px; border:3px solid red; padding:10px; margin:20px; box-sizing : border-box; } 最终宽度 200+20*2 width = border + padding + content;<!DOCTYPE html> <html> <head> <title></title> <meta charset="utf-8"> <style type="text/css"> #nav{ width: 600px; height: 50px; background-color: pink; margin: 0 auto; } .c1,.c2,.c3{ /*将块元素转换为行内块元素*/ display: inline-block; /*width: 180px; height: 50px; padding: 0 10px;*/ width: 200px; height: 50px; box-sizing: border-box; padding: 0 10px; } .c1{ background-color: orange; /*margin-right: 5px; width: 175px;*/ } .c2{ background-color: green; /*margin-right: 5px; width: 175px;*/ } .c3{ background-color: blue; } </style> </head> <body> <div id="nav"> <div class="c1">首页</div><div class="c2">首页</div><div class="c3">首页</div> </div> </body> </html>
-
-
元素显示设置
属性：display
作用：改变元素类型- 取值：
block转换为块元素
inline转换为行内元素
inline-block转换为行内块元素
none设置元素隐藏 - 注意：
block设置元素显示
none设置元素隐藏
- 取值：
背景相关的属性
-
背景颜色
属性：background-color
取值：颜色值
注意：背景颜色从边框位置开始绘制 如果元素添加内边距，也会按照背景颜色进行填充 所有元素默认背景颜色都为透明，新建窗口为白色并不是body的背景黑色，是窗口渲染的结果 -
背景图片
属性：background-image
取值：url('图片路径') -
背景图片平铺显示
如果背景图片尺寸小于元素尺寸，会自动对图片对图片进行重复平铺，直到把元素铺满
属性：background-repeat
取值：
repeat默认值，沿水平和垂直方向平铺
no-repeat不重复平铺
repeat-x横向平铺
repeat-y纵向平铺 -
背景图片尺寸
属性：background-size
取值：
像素值
百分比 采用当前元素的尺寸获取
包含width height 两个值
…
cover将图片等比拉伸至完全覆盖元素，超出部分裁剪掉
contain将图片等比拉伸至刚好被元素容纳，未填充到的部分不管
1542
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
