自我总结37

css

样式操作

只有块级标签才可以设置长宽

行内标签设置了没有任何作用

字体操作

font-family
font-size
font-weight

color:
<!--英文颜色--> color:'red'
<!--python取色板-->
rgb(x,y,z)
rgba(x,y,z,m) m为透明度

文字属性

text-align   center/left/right/justify
text-decoration none/underline/overline/


a {
   text-decoration: none;
}  //取消a标签默认的下划线

背景属性

backgound-color 背景颜色
浏览器上面看到的任何数据都是基于请求后端响应返回给你的
网站的小图片特别多的时候  通常是将它们全部放在一张图片上
你在请求的时候  只需要请求一张图片就可以 节省资源
通过控制背景图片的位置来选择展示的图标

目前使用的   是将图片生成好之后 变成类似于代码的一串密文
支持简写  
background：

图片固定不动
	background-attachment:fixed

边框

border 后面写三个参数 简写 ：border 颜色 样式 粗细

border-top-style:dotted;
border-top-color: red;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:none;

可以单独设置某一边的样式
			/*border-top: 3px solid red;*/
            /*border-left: 1px dotted green;*/
            /*border-right: 5px dashed blue;*/
            /*!*border-bottom: 10px solid pink;*!*/
也可以简写统一设置
			border: solid 10px red; 

display属性

dispiay:
none 隐藏
inline 将块儿级标签变成行内标签
block  能够将行内标签 也能设置长宽和独占一行
inline-block  既有行内，又有块状的特点  /*即可以设置长宽 也可以在一行展示*/


visibility: hidden 隐藏属性 但是标签原来的位置还在

盒子模型

margin  外边距  标签与标签之间的距离
border	边框	  标签边框
padding 内边距	  内部文本到内边框距离
content 文本内容 主要内容


margin  top/left/right/bottom

/*谷歌浏览器默认8px的外边距 */
	margin：0
	
简写：
margin  参数1 上下 
		
				 参数1 参数2  上下  左右

				 参数1 参数2 参数3  上 左右  下 
		
				 参数1 参数2 参数3 参数4  上 右 下 左 顺时针转

border
padding  同margin用法一致
content



#d1 {
           margin: 0 auto;
       }
/*
只能左右居中  不能上下居中
*/ 

浮动 float

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

脱离正常的文档流，悬浮在空中，(原来的位置会让出来)

作用：前期布局

影响：会造成父标签塌陷

如何解决：

/*清除浮动带来的影响*/

.clearfix.after{
    content:'';
    dispaly:block;
    clear:both;
}
/*哪里塌陷就给谁加clearfix属性*/

溢出

overflow

hidden
scroll
auto

圆形头像示例

定位

所有的标签默认都是静态的 没有定位一说 position: static

如果你想让标签移动 你必须先改变的性质

relative 相对对位

absolute 绝对定位

fixed 固定定位 固定在浏览器窗口某一个位置 始终不变 (回到顶部)

是否脱离文档流

不脱离：相对定位

脱离：绝对定位 固定定位

z-index

模态框示例 三层

默认浏览器窗口是一个三维坐标系

水平方向x轴
垂直方式y轴
朝向人的z轴	/*z轴坐标越大越接近人*/

opacity

既可以调文字也可以调颜色