标签：ext absolute opacity line spl pycharm style 字体 统一
如何设置标签样式
给标签设置长宽
只有块儿级标签才可以设置长宽
行内标签设置了没有任何作用(仅仅只取决于内部文本值)
字体颜色 color后面可以跟多种颜色数据
颜色英文 red
#06a0de 直接用pycharm提供的取色器即可
rgb(1,1,1) 可以利用截图软件获取三基色数字
rgba(0,128,128,0.9) 最后一个数字 只能用来调节颜色的透明度
语义
a {
text-decoration: none;
}
取消a标签默认的下划线
背景图片 默认是铺满整个区域
通常一个页面上的一个个的小图标 并不是单独的
而是一张非常大的图片 该图片上有网址所用到的所有的小图标
通过控制背景图片的位置 来显示不同的图标样式
边框
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
inline 将块儿级标签变成行内标签
block 能够将行内标签 也能设置长宽和独占一行
inline-block; /*即可以设置长宽 也可以在一行展示*/
display:none 隐藏标签 并且标签原来占的位置也没有了
visibility:hidden 隐藏标签 但是标签原来的位置还在
盒子模型
谷歌浏览器body默认有8px外边距
body {
margin:0px;
}
以快递盒为例
1.两个快递盒之间的距离(标签与标签之间的距离) 外边距(margin)
2.快递盒盒子的厚度(边框border) 边框(border)
3.快递盒中的物品距离内边框的距离(内部文本与内边框之间的距离) 内边距(内填充) padding
4.物品的大小(文本大小) 内容content
/*margin: 15px; !*只写一个参数 上下左右全是*!*/
/*margin: 10px 20px; !*第一个控制的上下 第二个是左右*!*/
/*margin: 10px 20px 30px; !*第一个控制的上 第二个是左右 第三个是下*!*/
margin: 10px 20px 30px 40px; /*上 右 下 左*/
padding简写规律跟margin一样
#d1 {
margin: 0 auto;
}
只能左右居中 不能上下居中
浮动(*****)
float
在 CSS 中，任何元素都可以浮动。
浮动的元素 是脱离正常文档流的(原来的位置会让出来)
浏览器会优先展示文本内容(******)
浮动带来的影响
会造成父标签塌陷(口袋瘪了)
如何解决父标签塌陷问题？？？
clear 清除浮动带来的影响
.clearfix:after {
content: '';
clear: both; /*左右两边都不能有浮动的元素*/
display: block;
}
哪个父标签塌陷了 就给谁加clearfix这个类属性值
overflow溢出属性
定位
所有的标签默认都是静态的 无法改变位置
position: static;
必须将静态的状态修改成定位之后
相对定位(了解) relative
相对于标签原来的位置 移动
绝对定位(小米的购物车) absolute
相对于已经定位过(只要不是static都可以 relative)的父标签 再做定位
固定定位(回到顶部) fixed
相对于浏览器窗口 固定在某个位置不动
位置的辩护是否脱离文档流
1.不脱离文档流
相对定位
2.脱离文档流
浮动的元素
绝对定位
固定定位
opacity
既可以调颜色 也可以调字体
标签：ext absolute opacity line spl pycharm style 字体 统一
原文地址：https://www.cnblogs.com/jinhongquan/p/11858819.html
