标签:浮动 定位 index 元素 100px border 前端开发
今日内容详细
边框border
边框属性
·border-width
·border-style
·border-color
/*border-left-width: 5px;*/
/*border-left-style: dotted;*/
/*border-left-color: #0000ff;*/
/*border-left: 3px solid black;*/
border: 10px solid orange;
画圆
border-radius
用这个属性能实现圆角边框的效果。
将border-radius设置为长或高的一半即可得到一个圆形。
border-radius: 50%;
值 |
描述 |
none |
无边框 |
dotted |
点状虚线边框 |
dashed |
矩形虚线边框 |
solid |
实线边框 |
display
用来控制HTML元素的显示效果
"""
行内标签是无法设置长宽 只有块儿级可以设置
"""
display:none 彻彻底底的隐藏标签(页面上不会显示 也不会保留标签的位置)
visibility: hidden 隐藏的不彻底
值 |
意义 |
display:none |
HTML文档中元素存在,但是在浏览器中不显示。一般用于配合JavaScript代码使用 |
display:block |
默认占满整个页面宽度,如果设置了指定宽度,则会用margin填充剩下的部分 |
display:inline |
按行内元素显示,此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。 |
display:inline-block |
使元素同时具有行内元素和块级元素的特点。 |
盒子模型
我们可以将标签看成是一个盒子(快递盒)
1.快递包里面的实际物体 content(内容)
2.物体与内部盒子墙的距离 padding(内边距、内填充)
3.快递盒的厚度 border(边框)
4.快递盒之间的距离 margin(外边距)
/* !*padding: 20px; 上下左右*!*/
/* !*padding: 20px 40px; 上下 左右*!*/
/* !*padding: 10px 20px 30px; 上 左右 下*!*/
/* !*padding: 10px 20px 30px 40px; 上 右 下 左 *!*/
margin与padding用法一致
针对标签的嵌套 水平方向可以居中
margin: 0 auto;
![img](/i/i/?n=18&i=blog/867021/201803/867021-20180305155247808-885981996.png)
浮动float
浮动就是用来做页面布局的
浮动的现象
float:left\right
浮动带来的影响
浮动的元素是脱离正常文档流的 会造成父标签塌陷
如何解决浮动的影响
终极方法:
.clearfix:after{
content:'';
display:block;
clear:both
}
谁塌陷了 就给谁添加clearfix样式类就可以了
ps:浏览器会优先展示文本内容(如果被挡住)
CSS 浮动
请看下图,当把框 1 向右浮动时,它脱离文档流并且向右移动,直到它的右边缘碰到包含框的右边缘:
![CSS 浮动实例 - 向右浮动的元素](https://www.w3school.com.cn/i/css/positioning_floating_right_example.gif)
再请看下图,当框 1 向左浮动时,它脱离文档流并且向左移动,直到它的左边缘碰到包含框的左边缘。因为它不再处于文档流中,所以它不占据空间,实际上覆盖住了框 2,使框 2 从视图中消失。
如果把所有三个框都向左移动,那么框 1 向左浮动直到碰到包含框,另外两个框向左浮动直到碰到前一个浮动框。
![CSS 浮动实例 - 向左浮动的元素](https://www.w3school.com.cn/i/css/positioning_floating_left_example.gif)
如下图所示,如果包含框太窄,无法容纳水平排列的三个浮动元素,那么其它浮动块向下移动,直到有足够的空间。如果浮动元素的高度不同,那么当它们向下移动时可能被其它浮动元素“卡住”:
![CSS 浮动实例 2 - 向左浮动的元素](https://www.w3school.com.cn/i/css/positioning_floating_left_example_2.gif)
溢出overflow
div{
height: 150px;
width: 150px;
border: 5px solid greenyellow;
border-radius: 50%;
overflow: hidden;
}
div img{
max-width: 100%;
}
overflow(水平和垂直均设置)
overflow-x(设置水平方向)
overflow-y(设置垂直方向)
值 |
描述 |
visible |
默认值。内容不会被修剪,会呈现在元素框之外。 |
hidden |
内容会被修剪,并且其余内容是不可见的。 |
scroll |
内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。 |
auto |
如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。 |
inherit |
规定应该从父元素继承 overflow 属性的值。 |
定位
标签在默认情况下都是无法通过定位的参数来移动
针对定位有四种状态
1.static静态(标签默认的状态 无法定位移动)
2.relative相对定位(基于标签原来的位置)
当position属性的取值为relative时,可以将元素定位于相对位置中。对元素设置相对定位后,可以通过边偏移属性改变元素的位置,但是它在文档流中的位置仍然保留
3.absolute绝对定位(基于某个定位过的父标签做定位)
当position属性的值为absolute时,可以将元素的定位模式设置为绝对定位。
注意:绝对定位最重要的一点是,它可以通过边偏移移动位置,但是它完全脱标,完全不占位置。
4.fixed固定定位(基于浏览器窗口固定不动)
脱离文档流:
绝对定位
固定定位
不脱离文档流:
相对定位
.c1{
background-color: red;
height: 100px;
width: 100px;
position: relative;
}
.c2{
background-color: greenyellow;
height: 100px;
width: 200px;
position: absolute;
top: 100px;
left: 100px;
}
.c1{
border: 5px solid black;
height: 100px;
width: 100px;
position: fixed;
right: 100px;
bottom: 200px;
}
z-index
设置对象的层叠顺序。
1.z-index 值表示谁压着谁,数值大的压盖住数值小的,
如果取值相同,根据书写顺序,后来者居上
2.只有定位了的元素,才能有z-index,也就是说,不管相对定位,绝对定位,固定定位,都可以使用z-index,而浮动元素不能使用z-index
3.z-index值没有单位,就是一个正整数,默认的z-index值为0如果大家都没有z-index值,或者z-index值一样,那么谁写在HTML后面,谁在上面压着别人,定位了元素,永远压住没有定位的元素。
4.从父现象:父亲怂了,儿子再牛逼也没用
body{
margin: 0;
}
.cover{
background-color: rgba(127,127,127,0.5)
position: fixed;
left: 0;
bottom: 0;
right: 0;
top: 0;
z-index: 100;
}
.modal{
height:200px;
width:400px;
background-color:white;
z-index: 101;
position: fixed;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -100px;
}
简易博客搭建
1.分析页面结构
利用布局标签div和span搭建架子
2.先编写网页骨架
HTML
3.再编写CSS
4.最后编写JS
标签:浮动,
定位,
index,
元素,
100px,
border,
前端开发
From: https://www.cnblogs.com/qian-yf/p/16945334.html