标签：浮动 index 定位 标签 44 元素 border day
目录
给标签设置长宽
只有块级标签才可以设置长宽
行内标签设置了没有任何作用(仅仅只取决于内部文本内容)
字体颜色
color后面可以跟多种颜色数据
颜色英文 red
#u6a0de 直接用pycharm提供的颜色取色器即可
rgb(1,2,3) 可以利用截图软件获取三基色数字
rgba(0,123,123,0.2) 最后一个数字 只能用来调节颜色的透明度
语义
p {
font-size: 24px; /*字体大小*/
text-indent: 48px; /*字体缩进*/
text-align: center;/*居中*/
text-align: left;/*居左*/
text-align: right;/*居右*/
text-decoration: #e33d46 line-through; /*删除线*/
text-decoration: overline; /*上划线*/
text-decoration: underline;/*下划线*/
}
a {
text-decoration: none; /*取消标签的默认下划线*/
}
背景图片
默认是铺满整个区域
background-repeat: no-repeat; /*不平铺*/
background-repeat: repeat-x; /*水平方向上平铺*/
background-repeat: repeat-y; /*垂直方向上平铺*/
background-position: 200px 200px; /*位置*/
background: #334422 url('1.jpg') no-repeat left top; /*简写*/通常一个页面上的一个个小图标 并不是单独的
而是一张非常大的图片 该图片上有网址所用到的所有的小图标
通过控制背景图片的位置 来显示不同的图表样式
边框
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; /*solid 实线边框*/
border-left: 1px dotted green; /*dotted 点状虚线边框*/
border-right: 5px dashed blue; /*dashed 矩形虚线边框*/
border-bottom; 10px solid pink; /*none 默认无边框*/
也可以同一简写设置:
border: solid 10px red
border-radius: 50%; /*设置为长或高的一半可得到圆形*/display
display: inline 将块级标签变成行内标签
display: block 能将行内标签 设置成长宽和独占一行
display: inline-block 既可以设置长宽,也可以在一行展示
display: none 隐藏标签 并且标签原来占的位置也没有了
visibility: hidden 隐藏标签 标签原来的位置还在css盒子模型
谷歌浏览器body默认有8px外边距
margin 用于控制元素与元素之间的距离
padding 用于控制内容于边框之间的距离
border 围绕在内边距和内容外的边框
content 盒子内容,显示文本和图像
body {
margin:0px;
} 以快递盒为例
1.两个快递盒之间的距离(标签与标签之间的距离) 外边距(margin)
2.快递盒子的厚度(边框border) 边框(border)
3.快递盒中物品距离内边距的距离(内部文本与内边距之间的距离 内边距(内填充)
4.物品的大小(文本的大小) 内容content
margin: 15px; 只写一个参数 上下左右都是一样
margin: 10px 20px; 第一个控制的上下 第二个是左右
margin: 10px 20px 30px; 第一个控制的上 第二个是左右 第三个是下
margin: 1px 10px 20px 30px; 上 右 下 左
padding 也是一样
#dl {
margin: 0 auto;
}/*只能左右居中,不能上下居中*/浮动
float
在css中 任何元素都可以浮动
浮动的元素是脱离正常文档流的(原来的位置会让出来)
浏览器会优先展示文本内容
float: left: 向左浮动
float: right: 向右浮动
float: none: 不浮动浮动带来的影响
会造成父标签塌陷
如何解决父标签塌陷问题
clear
清除浮动带来的影响
clear属性规定元素的哪一侧不允许其他浮动元素
left: 在左侧不允许浮动元素
right: 在右侧不允许浮动元素
both: 在左右两侧均不允许浮动元素
none: 默认值.允许浮动元素出现在两侧
inherit: 规定应该从父元素继承clear属性的值
.clearfix:a {
content: '';
clear: both; /*左右两边都不能有浮动的元素*/
display: block;
} 那个父标签塌陷了 就给谁加clearfix这个属性值
overflow溢出属性
visible 默认值,内容不会被修剪,会呈现在元素框之外
hidden 内容会被修剪,并且其余内容是不可见的
scroll 内容会被修剪,但是浏览器会显示滚动条一边查看其余的内容
auto 如果内容被修剪,则浏览器会呈现滚动条一边查看其余内容
inherit 规定应该从父类继承overflow属性的值
overflow (水平和垂直均设置)
overflow-x (设置水平方向)
overflow-y (设置垂直方向)定位
所有的标签默认都是静态的 无法改变位置
position: static; 必须将静态的状态修改成定位之后
相对定位(了解) relative
相对于标签原来的位置移动
绝对定位 absolute
相对于已经定位过(只要不是static都可以relative)的父标签 再做定位
固定定位 fixed
相对浏览器窗口 固定在某个位置不动
z-index
设置对象的层叠顺序
1.z-index值表示谁压着谁,数值大的压盖住数值小的
2.只有定位了的元素才能有z-index,也就是说,不管相对定位,绝对定位,固定定位,都可以使用z-index,而浮动元素不能使用z-index
3.z-index值没有单位,就是一个整数,默认的z-index值为0如果大家都没有z-index值,或者z-index值一样,那么谁写在HTML后面,谁在上面压着别人,定位了元素,永远压住没有定位的元素
# i2 {
z-index:999;
} 位置的辩护是否脱离文档流
1.不脱离文档流
相对定位
2.脱离文档流
浮动的元素
绝对定位
固定定位
opacity
用来定义透明效果,取值范围0~1,0完全透明,1完全不透明
# l1 {
opacity:0.2;
} 即可以调颜色也可以调字体
标签：浮动,index,定位,标签,44,元素,border,day 来源： https://www.cnblogs.com/LZF-190903/p/11863285.html
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。