前端基础之CSS

• 前端基础之CSS
  • 边框
  • display
  • 盒子模型
  • 浮动
  • 溢出
  • 定位
  • z-index
  • 简易博客页面搭建流程

边框

边框的写法：
border：边框的宽度、样式、颜色；

边框的四种样式：solid、dashed、dotted、double
solid   #细线
dashed  #线段组成的虚线
dotted  #圆点组成的虚线
double  #双线

边框的四条边：
border-top      #上边框
border-bottom   #下边框
border-left     #左边框
border-right    #右边框

border-width：上 下 左 右 
# 对边框的四条边的宽度进行设置
border-style：上 下 左 右  
# 对边框的四条边的风格进行设置，就是上面的样式
border-color：上 下 左 右
# 对边框的四条边的颜色进行设置
上、下、左、右若只写两个则表示上下、左右各是一种；只写一个，就是四条边全部应用。

代码示例：
border-left-width: 5px; # 设置左边框宽度为5px
border-left-style: dotted; # 设置左边框风格为dotted
border-left-color: #0000ff; # 设置左边框颜色为#0000ff
border-left: 3px solid black; 
# 简洁写法，设置左边框宽度为3px、风格为solid、颜色为black

 # 边界半径，也就是圆角。
    边界半径由属性border-radius进行控制，这是一个简写属性。
    边界半径可以有一个、两个、三个或四个值进行设置。同样也可以对盒子的每一个角的半径进行单独设置。
    border-top-left-radius      # 左上角
    border-top-right-radius     # 右上角
    border-bottom-left-radius   # 左下角
    border-bottom-left-radius   # 右下角

# 边界半径可以使用 px、em 等长度单位，也可以使用百分数。
border-radius: 50%;

display

	根据CSS规范的规定，每一个网页元素都有一个display属性用于确定该元素的类型。每一个元素都有默认的display属性值。
    比如div元素，它的默认display属性值为“block”，称为块元素；
    而span元素的默认display属性值为“inline”，称为“行内”元素。
    "块元素与行元素是可以转换的，也就是说display的属性值可以由我们来改变。
"
四种属性值分别为：
   display：block; # 转换为块元素
   display：inline; # 转换为行内元素
   display：inline-block; # 转换为行内块元素
   display：none; # 元素不会被显示

"""
行内标签是无法设置长宽的，只有块儿级可以设置
"""
display:none  
# 彻彻底底的隐藏标签(页面上不会显示 也不会保留标签的位置)
visibility: hidden  
# 隐藏的不彻底

盒子模型

每个可见的HTML元素都是一个盒子，它装的东西就是HTML元素的内容。

一个盒子由外到内可分成四个部分：
	margin   # 外边距
    border   # 边框
    padding  # 内边距
    content  # 内容
PS：
	margin、border、padding是CSS属性，可以通过这三个属性来控制盒子的这三个部分。而content则是HTML元素的内容。
    
	# margin
    盒子的外边框，完全透明，开发者只可以设置它的边距。
	margin包含了上下左右四条边，可以单独设置每一条边的边距，也可以直接使用简写属性margin同时设置四条边的宽度。
    
	# padding
    盒子的内边距（填充）。与外边距不同，padding不是只能完全透明的，可以设置背景颜色和图片。
	padding包含了上下左右四条边，可单独设置每一条边的边距，也可以直接使用简写属性padding同时设置四条边的宽度。

	# border
    盒子的边界，它可以设置成可见的，样式多样的。
	最基本的，border像margin和padding一样可以分别对每一条边进行设置，也可以使用简写属性border进行设置。
	当border属性的色值不明确指定时，如border: 1px solid，边框颜色与当前元素的字体颜色color相同。
    除了可以单独对每一条边进行样式设置之外，还可以分别对边界的宽度、样式和颜色进行设置（下面的属性会对四条边进行设置），同样可以使用简写属性border进行设置。

浮动

浮动（float）属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘。
语法：
	选择器 { float: 属性值;}

浮动属性：
    none	元素不浮动（默认值）
    left	元素向左浮动
    right	元素向右浮动

浮动影响：
浮动的元素脱离正常文档流，会造成父标签塌陷。

# 可使用clear解决浮动的影响
先提前写好样式类
.clearfix:after {
    content: '';
    display: block;
    clear: both;
}
谁塌陷了，就给谁添加clearfix样式类就可以

PS：如果被挡住，浏览器会优先展示文本内容

溢出

溢出(overflow) 属性：
指定在元素的内容太大而无法放入指定区域时，是剪裁内容还是添加滚动条。

overflow 属性可设置以下值：
    visible- 默认。溢出没有被剪裁，内容在元素框外渲染
    hidden - 溢出被剪裁，其余内容将不可见（被隐藏）
    scroll - 溢出被剪裁，同时添加滚动条以查看其余内容（即便不需要）
    auto -   与 scroll 类似，但仅在必要时添加滚动条

    PS：overflow属性仅适用于具有指定高度的块元素。

# overflow-x 和 overflow-y
	overflow-x 和 overflow-y 属性规定是仅水平还是垂直地（或同时）更改内容的溢出：
    overflow-x 指定如何处理内容的左/右边缘。
    overflow-y 指定如何处理内容的上/下边缘。

"当想更好地控制布局时，可以使用 overflow 属性。"
eg:
    div {
    overflow-x: hidden; /* 隐藏水平滚动栏 /
    overflow-y: scroll; / 添加垂直滚动栏 */
}
    

定位

在CSS中通过position属性定义元素的定位模式，语法如下：
	选择器 { position: 属性值; }

定位四种状态：
# static静态
	元素的默认定位方式，无定位的意思。它相当于 border 里面的none， 不要定位的时候用。

# relative相对定位
	相对定位是元素相对于它原来在标准流中的位置来说的。
    # 相对定位相对于自己原来在标准流中的位置来移动
    # 原来在标准流的区域继续占有，后面的盒子以标准流的方式对待它
# absolute绝对定位
	绝对定位是元素以带有定位的父级元素来移动位置 
1.完全脱标 —— 完全不占位置；
2.父元素没有定位，则以浏览器为准定位（Document 文档）。
3.父元素要有定位
	将元素依据最近的已经定位（绝对、固定或相对定位）的父元素（祖先）进行定位。# 子绝父相 —— 子级是绝对定位，父级要用相对定位。
    
# fixed固定定位
	固定定位是绝对定位的一种特殊形式：如果说绝对定位是一个矩形，那么，固定定位就类似于正方形。
	1.完全脱标 —— 完全不占位置；
	2.只认浏览器的可视窗口：
	浏览器可视窗口 + 边偏移属性 来设置元素的位置；
	跟父元素没有任何关系；单独使用，不随滚动条滚动。
# 代码示例：
	        .c1 {
            background-color: red;
            height: 100px;
            width: 100px;
            position: relative;
        }
        .c2 {
            background-color: greenyellow;
            height: 100px;
            width: 200px;
            position: absolute;
            top: 100px;
            left: 100px;
        }
		.c1 {
            border: 5px solid black;
            height: 100px;
            width: 100px;
            position: fixed;
            right: 100px;
            bottom: 200px;
        }
        

z-index

z-index属性设置元素的堆叠顺序。拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面。
# 实例展示（见下方图片）：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>z-index Demo</title>
<style type="text/css">
div{
    width: 200px;height: 200px;
    text-align: center;
    font-size: 50px;
    line-height: 200px;
    position: absolute;
}

#red{left: 100px;top: 100px;}
#green{left: 200px;top: 200px;}
</style>
</head>
<body>
<!-- Z-index层叠性原则：
	1.同层级元素(或position:static)默认情况下文档流后面的元素会覆盖前面的。（后来居上）
	2. 对于同级元素，position不为static且z-index存在的情况下z-index大的元素会覆盖z-index小的元素，即z-index越大优先级越高。 -->
					   
<div id="red" style="background: red;z-index: 0;">A</div>
<div id="green" style="background-color: green;">B</div>
<div id="blue" style="background-color: blue;z-index: -1;">C</div>
</body>
</html>

简易博客页面搭建流程

1.分析页面结构
	利用布局标签div和span搭建架子
2.先编写网页骨架
	HTML
3.再编写CSS
4.最后编写JS