前端--CSS样式(属性、盒模型、float浮动、定位、z-index)

高度宽度

块级标签能设置高度宽度,内联标签不能设置高度宽度，内联标签的高度宽度由标签内部的内容来决定。

字体属性

• 文字字体

用font-family属性可以对标签的内容设置字体。比如微软雅黑、宋体、楷体等等，可以设置多个字体，浏览器是从左往右匹配，匹配上支持的字体之后就不再往后匹配。

• 字体大小

p{
            font-size: 20px;  /*默认字体大小16px*/
        }

• 字体粗细

font-weight属性用来设置字体的字重（粗细）。

值	描述
normal	默认值，标准粗细
bold	粗体
bolder	更粗
lighter	更细
100~900	设置具体粗细，400等同于normal，而700等同于bold
inherit	继承父元素字体的粗细值

• 文本颜色

颜色是通过CSS最经常的指定：

1. 十六进制值，如: ＃FF0000 #前两位是表示红，中间两位表示绿，后面两位表示蓝，F是最高级别，0表示最低级别（无色）

2. 一个RGB值，如: RGB(255,0,0) #红绿蓝就是RGB的意思，第一个参数是红，最高255，最低0

3. 颜色的名称，如: red

p{
            font-size: 20px;
            color: #ff674f;
            background-color: rgba(0,0,0,0.7); /* rgba可以设置透明度,0-1之间的数字 */
            /*color: rgb(255, 170, 205);*/
            /*color:red;*/
           }
           .c2{
            width: 100px;
            height: 100px;

            /*background-color: rgba(255,0,0,0.3);*/
            background-color: rgb(255,0,0);

            opacity: 0.3; /* 0-1之间的数字,这是设置整个标签的透明底 */

        }
  

opacity透明度和rgba透明度的区别：

opactiy是整个标签的透明度
rgba是单独给某个属性设置透明度

文字属性

• 文字对齐(水平方向)

text-align属性规定元素中的文本的水平对齐方式。

值	描述
left	左边对齐 默认值
right	右对齐
center	居中对齐

p{
            text-align: center;
        }

• 文字装饰

text-decoration属性用来给文字添加特殊效果。

值	描述
none	默认。定义标准的文本。
underline	定义文本下的一条线。
overline	定义文本上的一条线。
line-through	定义穿过文本下的一条线。
inherit	继承父元素的text-decoration属性的值。

• 首行缩进

p{
	text-indent: 32px; /*缩进2个字符*/
}

背景属性

body{
	background-color: blue;/* 设置背景颜色 */
	background-image: url("meinv.jpg");  /* 背景图片,url属性值为图片路径 */
	background-repeat: no-repeat; /* 图片是否平铺,默认是平铺的,占满整个标签 */
    background-position: right bottom; /* 图片位置 */
    background-position: 100px 50px; /* 图片位置,100px是距离左边的距离,50px是距离上面的距离 */
}

边框属性

div{
/*border-style: dotted;*/  样式
/*border-color: red;*/   颜色
/*border-width: 10px;*/  宽度
简写形式:
border: 10px(宽度) solid(直线) yellow;
border-radius: 5%;  /* 设置圆角 */
width: 200px;
height: 200px;
四个边框可以单独设置:
border-left:10px solid yellow ;
border-right:10px dashed red ;
}

边框样式的值：

值	描述
none	无边框。
dotted	点状虚线边框。
dashed	矩形虚线边框。
solid	实线边框。

display属性

作业：用于控制HTML元素的显示效果

值	意义
display:“none”	HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。
display:“block”	默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。
display:“inline”	按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。
display:“inline-block”	使元素同时具有行内元素和块级元素的特点。

div.c1{
            height: 200px;
            width: 200px;
            border: 1px solid red;
            display: inline;
            /*display: inline-block;*/
            /*display: none; !* 隐藏标签 *!*/
        }

隐藏标签：

display: none;  /* 隐藏标签,不占原来的位置 */
visibility: hidden;  /* 原来的位置还占着 */

盒模型

content:内容 width和height 是内容的高度宽度
padding:内边距 内容和边框之间的距离
border:边框
margin:外边距 标签之间的距离,如果两个标签都设置了margin,选最大的值,作为双方之间的距离
占用空间大小:content+padding+border

四个方向单独设置padding：

padding-left: 10px;
padding-top: 8px;
padding-right: 5px;
padding-bottom: 5px;

四个方向单独设置margin：

margin-top: 10px;
margin-left: 100px;
margin-bottom: 50px;
margin-right: 200px;

简写padding：

padding: 5px 10px 15px 20px; 四个值，顺序是上右下左
提供一个，用于四边；
提供两个，第一个用于上－下，第二个用于左－右；
如果提供三个，第一个用于上，第二个用于左－右，第三个用于下；
提供四个参数值，将按上－右－下－左的顺序作用于四边；

简写margin：

margin: 5px 10px 15px 20px; 顺序是上右下左
如果写的是三个：
margin: 10px 20px 10px;意思是上为10，左右为20，下为10

浮动

作用：一般用来进行页面布局。浮动会脱离正常文档流，会造成父级标签塌陷问题（飘走了），如下图：

清除浮动(解决塌陷问题)：

方式一：
给父级标签设置高度

.cc{
      height: 100px;
        }

方式二：
clear: both; 清除浮动

.c3{
            height: 100px;
            background-color: pink;
            clear: both; clear清除浮动
        }

方式三：
给父级标签设置overflow:hidden属性可以清除浮动(overflow溢出)

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

.cc{
            overflow:hidden
        }

方式四(推荐)：
通过伪元素选择器来进行清楚浮动：

.clearfix:after{
            content:'';
            display: block;
            clear: both;
        }

clear属性规定元素的哪一侧不允许其他浮动元素。

值	描述
left	在左侧不允许浮动元素。
right	在右侧不允许浮动元素。
both	在左右两侧均不允许浮动元素。
none	默认值。允许浮动元素出现在两侧。
inherit	规定应该从父元素继承 clear 属性的值。

定位

相对定位：position: relative;相对于自己自己原来的位置进行移动,原来的空间还占着

绝对定位：position: absolute;：不占用自己原来的位置,移动的时候如果父级标签以及祖先辈标签如果设置了相对定位,父级标签或者祖先标签进行移动 ,如果父级标签都没有设置相对定位,那么就按照整个文档进行移动
固定定位：position: fixed;按照浏览器窗口的位置进行移动,可配合a标签实现’回到顶部’的功能。

z-index

作用：设置层级，比如知乎中：

z-index注意点：

1.z-index 值表示谁压着谁，数值大的压盖住数值小的，
2.只有定位了的元素，才能有z-index,也就是说，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素float不能使用z-index
3.z-index值没有单位，就是一个正整数，默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位了元素，永远压住没有定位的元素。
4.从父现象：父级z-index设置小了，子级设置再大也没用