初始CSS(二)

美化网页元素

为什么要美化网页

1 有效的传递页面信息

2 美化网页,页面漂亮,吸引用户

3 凸显页面主题

4 提高用户体验

重点要突出的字,使用span标签

字体样式

font-family:宋体  //字体样式
font-size:50px	 //字体大小
font-weight:bold //字体粗细
font-colour:red  //字体颜色

文本样式

text-align: center 	  //排版,居中
text-indent: 2em	  //首行缩进
background: blue 	  //文字背景
line-hieght: 300px	  //行高
hieght: 300px		  //文本高度
当line-hieght和hieght相同时文本上下居中
text-decoration: underline; //下划线
text-shadow: 颜色 水平偏移 垂直偏移 阴影半径
---------------------------------
a标签自带下划线,去掉的方法如下:
a{
	text-decoration: none;
}
---------------------------------
鼠标悬浮状态(常用)
a:hover {
	color:red;
}
鼠标按住未释放
a:active {
	color:green
}

列表样式

list-style: none     //列表样式
	    decimal  //有序
	    square  //正方形

背景

background-image: url("xxx/xxx.jpg")    //背景图片平铺
background-repeat: repeat-x  //平铺方向
background:颜色 图片 图片水平位置 图片垂直位置 平铺方式

渐变

background-image: linear-gradient(115deg,#FFFFFF 0%,#6284FF 50% #FF0000 100%)

盒子模型

什么是盒子模型

所谓盒子模型（Box Model）就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的内容(content)、内边距（padding）、边框（border）和外边距（margin）组成。

　　所有的文档元素（标签）都会生成一个矩形框，我们成为元素框（element box），它描述了一个文档元素再网页布局汇总所占的位置大小。因此，每个盒子除了有自己大小和位置外，还影响着其他盒子的大小和位置。

特点

• 　每个盒子都有：边界、边框、填充、内容 4个属性；
• 每个属性都包括4个部分：上、右、下、左。属性的4部分可以同时设置，也可以分别设置。

圆角边框

border-radius:左上 右上 左下 右下
只有两个值	  :主对角线 副对角线
只有一个值     :四个角

浮动

块级元素:独占一行

h1~h6	p	div

行内元素:不占一行

span	a	

行内元素变块元素

display:block    //变块级元素
display:inline   //变成行内元素
display:inline-block //编程行内块元素

float

定义和用法:

float 属性定义元素在哪个方向浮动。以往这个属性总应用于图像，使文本围绕在图像周围，不过在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素。

如果浮动非替换元素，则要指定一个明确的宽度；否则，它们会尽可能地窄。

注释：假如在一行之上只有极少的空间可供浮动元素，那么这个元素会跳至下一行，这个过程会持续到某一行拥有足够的空间为止。

float: right    //右浮动
float:left	    //左浮动
float:none(默认)
float:inherit	//从父元素继承float属性

父级塌陷问题

如果浮动元素脱离了文档流，包围图片和文本的 div 不占据空间。

如何让包围元素在视觉上包围浮动元素呢?需要在这个元素中的某个地方应用clear:

我们需要在这个div里添加一个新的空div并且清理他.

.news {
  background-color: gray;
  border: solid 1px black;
  }

.news img {
  float: left;
  }

.news p {
  float: right;
  }

.clear {
  clear: both;
  }

<div class="news">
<img src="news-pic.jpg" />
<p>some text</p>
<div class="clear"></div>
</div>

或者给父类添加一个伪类:after(推荐)

.news {
  background-color: gray;
  border: solid 1px black;
  }
#father:after {
	content:'';
	display:block;
	clear:both;
}
.news img {
  float: left;
  }

.news p {
  float: right;
  }

<div id="father" class="news">
<img src="news-pic.jpg" />
<p>some text</p>
</div>

对比

• display
  • 方向不可以控制
• float
  • 浮动起来会脱离标准文档流,所以要解决父级边框塌陷问题

定位

相对定位

如果对一个元素进行相对定位，它将出现在它所在的位置上。然后，可以通过设置垂直或水平位置，让这个元素“相对于”它的起点进行移动。

如果将 top 设置为 20px，那么框将在原位置顶部下面 20 像素的地方。如果 left 设置为 30 像素，那么会在元素左边创建 30 像素的空间，也就是将元素向右移动。

#box_relative {
  position: relative;
  left: 30px;
  top: 20px;
}

如下图所示:

绝对定位

绝对定位使元素的位置与文档流无关，因此不占据空间。这一点与相对定位不同，相对定位实际上被看作普通流定位模型的一部分，因为元素的位置相对于它在普通流中的位置。

普通流中其它元素的布局就像绝对定位的元素不存在一样：

#box_relative {
  position: absolute;
  left: 30px;
  top: 20px;
}

如下图所示：

绝对定位的元素的位置相对于最近的已定位祖先元素，如果元素没有已定位的祖先元素，那么它的位置相对于最初的包含块。

固定定位

相对于浏览器窗口进行定位,脱离原来的文档流

#box_relative {
  position: fixed;
  left: 30px;
  top: 20px;
}

网站右下角的回到顶部就是这样实现的

总结：

相对定位是“相对于”元素在文档中的初始位置，而绝对定位是“相对于”最近的已定位祖先元素，如果不存在已定位的祖先元素，那么“相对于”最初的包含块,固定定位则是根据浏览器窗口进行定位,始终固定在窗口的一个位置。

注释：根据用户代理的不同，最初的包含块可能是画布或 HTML 元素。

其他

opacity:0.5		//透明度(0~1)
z-index:999	  	//层级,数字越大越靠上

总结

graph LR A[CSS]---B[初始及入门] B---G[CSS概念] G---CSS在网页中的应用 G---CSS的发展史 G---CSS的优势 B---H[CSS基本语法] H---J[style] B---I[三种引入的方式] I---行内样式 I---内部样式 I---外部样式 B---k[CSS的选择器] k---l[基本选择器] l---id l---标签 l---Class k---m[高级选择器] m---层次选择器 m---结构伪类选择器 m---属性选择器 A---C[美化网页] C---字体 C---排版网页 C---超链接伪类 超链接伪类---:hover C---列表样式 C---背景样式 A---D[盒子模型] D---border D---margin D---padding D---盒子模型尺寸计算:上面三者相加 D---box-size D---圆角边框:border-radius D---box-shadow A---E[浮动] E---网页布局 网页布局-标准文档流 E---q[display] q---block q---inline q---inline-block E---float float---左浮动 float---右浮动 E---r[清除浮动] r---clear clear---left clear---right clear---both clear---none E---t[解决父级边框塌陷问题] t---空div t---:after E---inline-block_float A---F[定位] F---relative_相对定位 F---absolute_绝对定位 F---fixed_固定定位 F---z-index_图层层级 F---opcity_透明度