day40 css
Recap:
1. Floating
Non-standard document flow
Action: implementation elements side by side: a first box will hem parent box, the box will be affixed to the second side of the first box
Features: As long as the float, it is out of the standard document flow
Long float, there is a contraction effect, as if the effect block into an inner block row (because you float, flow out of the standard, the standard does not have the features of the block tag)
Word around: the beginning of the float is to do this
As long as a float, any label width and height can be set
Floating impact:
If the parent does not set the height of the box, the box sub-floated, because the sub-standard boxes from the document flow, the floating position is not accounted for the page, the parent does not hold the box height.
Note: To float floating together, floating, clear float (4 ways)
A. The parent box set to a fixed height, the latter is not good maintenance
Second interior law, to behind the floating element plus an empty block-level tags, the class name is usually clearfix, this property is set: clear: both; float clear impact on the right to the left brought me
III. Pseudo-element clearance method
.clearfix:after{
content:'.';
clear:both;
display:block;
visibility:hidden;
height:0;
}
Four parent tag plus attributes: overflow: hidden; forming BFC
2.display
inline: displaying in a row, width and height can not be set
block: an exclusive line, width and height may be provided
inline-block: display in a row, width and height may be provided
none: hide: does not occupy the position
3.visibility: hidden: accounting location
Content Today
A floating characteristics:
1. marked off floating element
2. floating elements against each other
3. The element has the effect of floating around the word
4. The effect of contraction
margin collapse problem:
margin: If you do not float in the standard document flow, the vertical direction will collapse problem
margin: If the float, the vertical direction would not have a problem collapse
margin box centered issues, centered horizontally:
margin 0 auto; if not float, in standard document stream, the box is centered horizontally
margin 0 auto: If the float, it does not work (how to solve: the floating box on the newly added hidden parent inside the box)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
.box1 {
width: 400px;
height: 400px;
}
/ * Floating box on the parent box hidden inside newly added, so that the parent center box * /
.main{
width: 100px;
overflow: hidden;
margin: 0 auto;
}
.box2{
width: 100px;
height: 100px;
margin: 0 auto; #子盒子margin这句就没作用了, 可以删掉
float: left;
}
</style>
</head>
<body>
<div class="box1">
<div class="main">
<div class="box2"></div>
</div>
</div>
</body>
</html>
文本的水平居中:text-align: center;
文本的垂直居中:行高=盒子的高度
多行文本垂直居中: 算出多行文本的高度, 用padding-top: 顶下来
css中有三种方式让盒子脱标: 浮动, 绝对定位, 固定定位
二.常用css的属性
1.文本属性:
文本对齐: text-align: right; (left, center, justify: 两端对齐,只适用于英文)
首行缩进: text-indent: 2em;
文本修饰: text-decoration: none; #常用做清除a标签默认的下划线(dicoration: 装饰)
: text-decoration: underline; #加下划线
: text-decoration: overline; #加上划线
: text-decoration: line-through; #加删除线
: text-decoration: inherit; #继承父标签的此属性(默认text-xxx就是继承父标签的,可以省略)
行高: line-height: 40px;(单行文本居中ling-height=height的值)
2.字体属性
字体大小: font-size: 16px;
字体粗细: font-weight: 400; (默认400没有px, 范围100~900: 400=normal,hold=700)
border:
bold:
normal:
lighter:
inherit:
字体系列: font-family: "华文行楷", "Microsoft Yahei", "微软雅黑", "Arial", sans-serif;
多个字体用逗号分隔, 表示从前往后在你的电脑上找这些字体, 如果都没有, 默认是宋体展示
sans-serif: 无衬线 serif: 有衬线
3.综合设置:
font: 14px/1.5 "华文行楷"
font: 14px/21px "华文行楷" #这两一样的效果
4.背景设置:(背景: background)
背景色设置有三种方式:
red;
background-color: rgb(255,0,0); #red green blue(0~255每种颜色都有256个)
background-color: rgba(0,0,0,.5); #透明度 #0,0,0黑色, 255,255,255白色 #.5透明度
background-color: #ff0000; #就是rgb的十六进制表示
background-color: #f00; #两两分组, 如果三个小组里的都一样, 那么可以缩写
背景图片设置:
background-image: url(); #默认背景图填不满时: 为平铺
background-repeat: no-repeat; #不重复, 填不满那不管; repeat: 这个是默认的; repeat-x: 只横向平铺; repeat-y: 只纵向平铺
background-position: 0 0; #两个值, x轴和y轴;
background-position-x:0;
background-position-y:0;
background-position: center top; #让一个大图在一个页面顶部居中显示: center(中心显示)
用background-position做个截图: (精灵图技术: 做图片的性能优化, 把很多的小图片放在一张大图上, 用css的截图来切你需要的小图(因为img的src每次都发一次请求, 浪费资源))
图片大小: 父盒子的宽高来搞
x,y的起始位置: 用background-position:负数; 来搞
background-attachment: fixed; #(附件: 固定) #背景图固定, 不随滚轮滚动
background:(综合属性: 可使代码变少, 简化代码)
background: url() no-repeat 0 -162px;
三.定位
有4种:
1.默认是: position:static; 静态定位
2. position: relative; 相对定位
标准文档流下的相对定位:
单独设置盒子的相对定位不会对这个盒子有任何影响
一个盒子有了相对定位属性:就可以用top, left, right, bottom属性
如果两个相邻的盒子都有相对定位: 后写的层级压盖权重大; 但是可以用 z-index: 5; 来调整
不脱标
先要找个参考点: 它的参考点是它原来的位置, 但是它的壳还在原来的地方(形影分离);
作用: 1.层级提高, 可以做压盖, (但是不建议这样搞)
2.布局方案, 做子绝父相的参考
3.position: absolute; 绝对定位
非标准文档流下的绝对定位:
position: absolute;
脱标了; 不占位置
层级提高了
position: absolute:
top: 0;
left: 0;
css中: 调整层级使用绝对定位
先找个参考点:
单个盒子: 如果以 top描述: 它的参考点是页面的左上角, 坐标轴的(0,0)点
如果以bottom描述: 它的参考点是浏览器的最下边
一般应用: 子绝父相
父盒子设置相对定位
子盒子设置绝对定位, top时, 定位是父盒子的左上角
浮动和定位之间不受影响:
一般大盒子用浮动, 每个盒子的内部进行定位调整
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
*{
padding: 0;
margin: 0;
}
.father{
width: 1226px;
height: 300px;
position: relative;
margin: 0 auto;
}
.b{
position: absolute;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
color: #fff;
top: 50%;
right: 0;
}
.a{
position: absolute;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
color: #fff;
top: 50%;
left: 0;
}
</style>
</head>
<body>
<div class="father">
<span class="a"><</span>
<span class="b">></span>
</div>
</body>
</html>
4.position: fixed; 固定定位