Web前端（三）-文本和字体相关样式、元素显示方式display、盒子模型（宽高、外边距、边框、内边距）、CSS三大特性（继承、层叠性、选择器优先级）
-
text-align: left /right/ center; 水平对齐方式
-
text-decoration: underline下划线/ overline上划线/ line-through删除线/ none去掉下划线
-
line-height: 30px; 行高, 可以控制多行的间距, 单行可以控制垂直居中
-
text-shadow: 颜色 x偏移值 y偏移值 浓度; 值越小越清晰
-
font-size: 20px; 字体大小
-
font-weight: bold加粗/ normal去掉加粗;
-
font-style: italic 斜体
-
font-family: xxx xxx xxxx; 设置字体
-
font: 30px xxx xxx xxx; 设置字体大小 和字体
元素的显示方式display
-
block: 块级元素的默认值
-
特点:独占一行,可以修改宽高 , 包括:div,h1-h6,p等
-
-
inline: 行内元素的默认值
-
特点:共占一行,不可以修改宽高,包括: span,b加粗,i斜体,u下划线,s删除线, 超链接a
-
-
inline-block:行内块元素默认值
-
特点: 共占一行,可以修改宽高, 包括:img,input等
-
-
行内元素默认是不能修改宽高的, 如果必须要改, 需要将显示方式display改成block或inline-block
盒子模型
-
盒子模型 = 宽高（weight、height）+外边距（margin）+边框（border）+内边距（padding）
-
通过盒子模型的相关样式,控制元素的显示效果
-
宽高: 控制元素的显示大小
-
外边距: 控制元素的显示位置
-
边框: 控制边框效果
-
内边距: 控制元素内容的位置
-
宽高
-
赋值方式: width/height
-
像素值
-
百分比(上级元素的百分比)
-
-
行内内元素不能修改宽高
外边距
-
什么是外边距:
元素距上级元素或相邻兄弟元素的距离称为外边距
-
赋值方式:
margin-left/right/top/bottom:10; 单独某个方向赋值
margin:50px; 四个方向赋值
margin:10px 20px; 上下10 左右20;
margin:10px 20px 30px 40px; 上右下左 -
上下相邻两个元素彼此添加外边距,取最大值
-
左右相邻两个元素彼此添加外边距,两者相加
-
行内元素上下外边距无效
-
粘连问题: 当元素的上边缘和上级元素的上边缘重叠时,给元素添加上外边距会出现粘连问题, 给上级元素添加overflow:hidden解决!
-
赋值方式:
-
border-left/right/top/bottom: 粗细 样式 颜色; 单独某个方向添加边框
-
border:粗细 样式 颜色; 四个方向添加边框
-
-
border-radius:3px; 圆角，值越大越圆 超过宽高一半时为正圆
内边距
-
元素边缘距内容的距离称为内边距, 用来控制元素内容的位置
-
给元素添加内边距会影响元素的宽高
-
赋值方式: 类似外边距
padding-left/right/top/bottom:10px; 单独某个方向
padding:10px; 四个方向
padding:10px 20px; 上下10 左右20
padding:10px 20px 30px 40px; 上右下左 顺时针
CSS三大特性
-
继承: 元素可以继承上级元素文本和字体相关的样式, 部分标签自带效果不受继承影响,比如:超链接字体颜色, h1-h6字体大小 。
-
层叠性: 多个选择器选择到同一个元素时, 如果作用的样式不同，则所有样式全部层叠生效, 如果样式相同，则由优先级决定。
-
选择器优先级: 作用范围越小，优先级越高, id>class>标签名>继承(属于间接选中,所以优先级最低)
晚课作业
参考代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
body{
font: 12px "simhei", Arial, Helvetica, sans-serif;
color: #666;
}
body>div{
background-color: #e8e8e8;
overflow: hidden;/*解决粘连问题*/
display: inline-block;
}
#left_div{
width: 611px;
height: 376px;
background-image: url("http://doc.canglaoshi.org/tstore_v1/images/itemCat/study_stationery_img1.png");
background-size: 254px 279px;
background-repeat: no-repeat;
background-position: 45px 52px;
}
#right_div{
width: 375px;
height: 376px;
background-image: url("http://doc.canglaoshi.org/tstore_v1/images/itemCat/study_stationery_img2.png");
background-size: 130px 230px;
background-repeat: no-repeat;
background-position: 0 50%;
}
#left_div>div{
width: 245px;
height: 232px;
margin: 70px 0 0 340px;
}
#right_div>div{
width: 224px;
height: 155px;
margin: 75px 0 0 130px;
}
.p1{
font-size: 32px;
color: #333;
margin-bottom: 12px;
}
.p3{
font-size: 16px;
margin-bottom: 12px;
color: #E89AA8;
font-weight: bold;
}
a{
width: 132px;
height: 40px;
display: block;
background-color: #E89AA8;
text-decoration: none;
text-align: center;
line-height: 40px;
color: white;
border-radius: 2px;
font-size: 20px;
}
?
</style>
</head>
<body>
<div id="left_div">
<div>
<p class="p1">雅致布面年历本</p>
<p class="p2">有色更有范！变色PU皮，撞色搭配，绚丽色彩，张扬个性，点亮生活新时尚！</p>
<p class="p3">仅售 ￥49.00</p>
<a href="">查看详情</a>
</div>
</div>
<div id="right_div">
<div>
<p class="p1">透视网格拉链袋</p>
<p class="p2">韩国创意卡通 丛林物语网格文件袋</p>
<p class="p3">仅售 ￥28.00</p>
<a href=