6.3 CSS 属性

标签：no-repeat   soft   技术   center   空间   radius   像素   back   microsoft   

宽和高

　　width属性可以为元素设置宽度。

　　height属性可以为元素设置高度。

　　块级标签才能设置宽度，内联标签的宽度由内容来决定。

字体属性 

文字字体

　　按照从第一个开始识别,直到能够识别到为止,识别到后后面的不再继续

body {
font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif
}

字体大小

p {
 font-size: 14px;
}

字重(粗细)

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

normal 　　　　标准粗细 (默认)
bold    　　　 粗体
bolder    　　 更粗
lighter　　    更细
inherit 　　　　继承父元素字体的粗细值

　　100~900 设置具体粗细，400等同于normal，而700等同于bold

p {
font-weight: bold;
}　　

p {
font-weight: 500;
}　

 

文本颜色

格式:

　　　　十六进制值 - 如: ＃FF0000

　　　　一个RGB值 - 如: RGB(255,0,0)

　　　　颜色的名称 - 如: red

　　　　rgba(255,0,0,0.3)，第四个值指定了色彩的透明度/不透明度，范围为0.0~1.0

p {
 color:RGB(255,0,0);
}

段落属性

文字对其

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

　　　　left 　　    左边对齐 默认值
　　　　right 　　  右对齐
　　　　center 　   居中对齐
　　　　justify 　　两端对齐

文字装饰

　　text-decoration 给文字添加特殊效果。

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

常用的为去掉a标签默认的自划线

a {
text-decoration: none;
}

 

首行缩进

将段落的第一行缩进 32像素

p {
text-indent: 32px;
}

背景属性

background-color:背景颜色
background-image:url(‘11.jpg‘); 背景图片链接
background-repeat:repeat-x; x轴平铺
background-repeat:no-repeat; 不重复
background-position:400px 200px 调整背景的位置（距左。距右）
background-position: center:center; 背景居中

简写：
background: url(‘11.jpg‘) no-repeat center;

 

边框

 属性

border-width　　宽度

border-style　　 风格

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

border-color　　 颜色

border-radius　 用这个属性能实现圆角边框的效果。
　　　　　　　　　将border-radius设置为长或高的一半即可得到一个圆形，可用于圆形头像展示

 示例

#i1 {
border-width: 2px;
border-style: solid;
border-color: red;
}

 

 支持简写方式：

#i1 {
 border: 2px solid red;
}

 

 

display 属性

　　用于控制HTML元素的显示效果。

 属性

display:"none"    　　　　HTML文档中元素存在，但是在浏览器中不显示。一般用于配合JavaScript代码使用。

display:"block"    　　　　默认占满整个页面宽度，如果设置了指定宽度，则会用margin填充剩下的部分。

display:"inline"    　　　　按行内元素显示，此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。

display:"inline-block"    　使元素同时具有行内元素和块级元素的特点。

 

 

display:"none"与visibility:hidden的区别：

　　visibility:hidden: 隐藏某个元素，隐藏的元素仍需占用与未隐藏之前一样的空间。会影响布局。

　　display:none: 隐藏某个元素，隐藏的元素不会占用任何空间。不影响布局

　　

CSS盒子

概念 

　　margin: 用于控制元素与元素之间的距离；

　　　　margin的最基本用途就是控制元素周围空间的间隔，

　　　　从视觉角度上达到相互隔开的目的。

　　padding: 用于控制内容与边框之间的距离；

　　Border(边框): 围绕在内边距和内容外的边框。

　　Content(内容): 盒子的内容，显示文本和图像。

 

margin外边距

.margin-test {
margin-top:5px;
margin-right:10px;
margin-bottom:15px;
margin-left:20px;
}

推荐使用简写：

　　顺序：上右下左

.margin-test {
margin: 5px 10px 15px 20px;
}

　　常见的居中方式:

.mycenter {
 margin: 0 auto;
 }

 

padding内填充

.padding-test {
padding-top: 5px;
padding-right: 10px;
padding-bottom: 15px;
padding-left: 20px;
}

推荐使用简写：

　　顺序：上右下左

.padding-test {
padding: 5px 10px 15px 20px;
}

 

补充padding的常用简写方式：

　　提供一个，用于四边；

　　提供两个，第一个用于上－下，第二个用于左－右；

　　如果提供三个，第一个用于上，第二个用于左－右，第三个用于下；

　　提供四个参数值，将按上－右－下－左的顺序作用于四边；

　　

float 

概念

　　在 CSS 中，任何元素都可以浮动。

　　浮动元素会生成一个块级框，而不论它本身是何种元素。

关于浮动的两个特点：

　　浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

　　由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。

取值

　　left：　　向左浮动
　　right： 　向右浮动
　　none：    默认值，不浮动

clear

概念

　　清除浮动的副作用（父标签塌陷问题）

 

父标签塌陷问题: 

　　浮动后的元素会脱离文档流,被浮动的元素会跑出父标签,从而破坏页面布局

 

实例

div设置边框为1,里面包两个p1和p2.p1浮动后.div会变成一条线

而p1和p2 会被放置在 div 下面而不是div内部 ,即浮动后的元素跑出了父标签

 

解决方法

固定高度

　　固定高度限制死了.如果后期有更多的浮动元素快超出了限定高度就无效了

伪元素清除法

　　只要子孙元素有浮动就给父标签设置这一属性即可,原理是浮动元素的下面添加空内容动态撑起父标签

overflow:hidden

　　将溢出的部分消除,会破坏子标签的显示,不推荐

 

推荐伪元素清除法（使用较多）：

.clearfix:after {   # 在元素的最下面插入一个内容
content: "";   　　 # 内容为空
display: block;    # 展示为整个宽度(变成块级)
clear: both;       # 不允许浮动
}

 

 清除浮动示例 : 　　

View Code

　　

overflow溢出属性 

属性值

visible 　　 默认值。内容不会被修剪，会呈现在元素框之外。

hidden 　   内容会被修剪，并且其余内容是不可见的。

scroll 　　  内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。

auto 　　   如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。

inherit 　　规定应该从父元素继承 overflow 属性的值。

滚动条出现位置：

overflow（水平和垂直均设置）

overflow-x（设置水平方向）

overflow-y（设置垂直方向）

圆形头像示例:

View Code　

定位（position）

属性值

static 　　默认值 不定位

relative    相对定位 相对于该元素的原始位置

absolite    绝对定位 相对于父标签的定位,一层一层往上直到 body
 
fixed    固定,以窗口为参考点固定

 返回顶部按钮示例

View Code

　　

z-index

概念

　　设置对象的层叠顺序。

　　z-index 值表示谁压着谁，数值大的压盖住数值小的，

　　z轴代表了你与电脑的距离,离你越近的页面z-index越大

　　被定位后的元素，才可使用z-index,不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index

ps:

position:relative  可以让元素定位而不变换位置.虽然没换位置,但是这个元素已经是被定位过的元素了.

　　z-index值 没有单位，就是一个正整数，

　　默认的z-index值为0如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，

　　定位了元素，永远压住没有定位的元素。

#i2 {
z-index: 999;
}

自定义模态框示例 : 

View Code

opacity

定义透明效果 0~1 

6.3 CSS 属性

标签：no-repeat   soft   技术   center   空间   radius   像素   back   microsoft   

原文地址：https://www.cnblogs.com/shijieli/p/10347101.html