自我总结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
既可以调文字也可以调颜色