标签(三)"/>
【CSS】CSS基础标签(三)
圆角边框:
border-radius:length;
单位可以为像素,也可以为百分比
如果是正方形 想设置一个圆,把数值修改为高度或者宽度的一半即可,或者直接写50%
如果是矩形 设置高度的一半,就可以实现两边为圆角的边框
盒子阴影:
box-shadow: h-shadow v-shadow blur spread color inset;
box-shadow: 10px 10px 10px 4px rgba(159, 154, 145, .5) ;
值 | 描述 |
h-shadow | 必须,水平阴影的位置,允许负值 |
v-shadow | 必须,垂直阴影的位置,允许负值 |
blur | 可选,模糊距离 |
spread | 可选,阴影的尺寸 |
color | 可选,阴影的颜色 |
inset | 可选,将外部阴影(outset)改为内部阴影 |
注意:
- 默认的是外阴影(outset)但是不可以写这个单词,否则导致阴影无效
- 盒子阴影不赞用空间,不会影响其他盒子排列
文字阴影:
text-shodow: h-shadow v-shadow blur color;
box-shadow: 10px 10px 10px rgba(159, 154, 145, .5) ;
值 | 描述 |
h-shadow | 必须,水平阴影的位置,允许负值 |
v-shadow | 必须,垂直阴影的位置,允许负值 |
blur | 可选,模糊距离 |
color | 可选,阴影的颜色 |
float浮动:
- 普通留(普通留/文档流)
按照标签规定好默认方式排列 块级元素独占一行 行内元素按照顺序,从左到右排列,碰到父元素边缘则自动换行
- 浮动
多个块级元素纵向排列找标准留,多个块级元素横向排列找浮动
float属性属于常见浮动框,将其移动到一边,直到左边缘或者右边缘触及包含块或另一个浮动框的边缘
属性 | 描述 |
none | 元素不浮动 |
left | 元素向左浮动 |
right | 元素向右浮动 |
浮动的特性:
- 浮动元素会脱离标准流(脱标)
- 浮动的元素会一行显示并且元素顶部对齐
- 浮动的元素会具有行内块元素的特性
浮动布局注意点
- 浮动标准流的父盒子搭配
先用标准流的父元素排列上下位置,之后内部子元素采取浮动排列左右位置
- 一个元素浮动了,理论上其余兄弟元素也要浮动。
一个盒子里有多个盒子,如果其中一个盒子浮动了,那么其他兄弟盒子也应该浮动,以防引起问题
浮动的盒子只会影响浮动盒子后边的标准流,不会影响前面的标准流
- 定位
清除浮动
由于浮动元素不再占用原标准流的位置,所以它会对后边的元素排版产生影响
清除浮动本质
- 清除浮动的本质是清除浮动元素造成的影响
- 如果父盒子本身就有高度,则不需要清除浮动
- 清除浮动后,父级就会根据浮动的子盒子自动检测高度,父级有了高度,就不会影响下边的标准流了
语法:
选择器{clear:属性值;}
属性值 | 描述 |
left | 不允许左侧有浮动元素(清除左侧浮动的影响) |
right | 不允许右侧浮动的元素(清除右侧浮动的影响) |
both | 同时清除左右两侧浮动的影响 |
额外标签法:
额外标签法会在浮动元素末尾加上一个空的标签。例如<div style="clear:both"></div>或其他标签(br或块级元素)
优点:通俗易懂,书写方便
缺点:添加许多无意义的标签,结构化交差
父级添加overflow
可以给父级添加overflow属性,将其属性值设置为hidden、auto或scroll
优点:代码简洁
缺点:无法显示代码溢出的部分
after伪元素:
:after方式是额外标签法的升级版。也是给父元素添加
.clearfix:after {content: "";display: block;height: 0;clear: both;visibility: hidden; } .clearfix {/* IE6、7专有*/*zoom: 1; }
优点:没有新增加标签,结构更加简单
缺点:照顾低版本浏览器
CSS定位
定位的组成
定位:将盒子定在某一个位置,所以定位也是在拜访盒子,按照定位的方式移动盒子。定位 = 定位模式 + 边偏移
定位模式用于指定一个元素在文档中的定位方式,边偏移则决定了该元素的最终位置。
定位模式
- 定位模式决定该元素的定位方式,它通过CSS的positive属性来设置,其值可以分为四个
属性 语义 static 静态定位 relative 相对定位 absolute 绝对定位 fixed 固定定位 边偏移
- 边偏移就是定位的盒子移动到最终的位置,有top、bottom、left、right四个属性。
静态定位(static)
静态定位是默认元素定位方式,无定位的意思。
语法:
选择器 { position: static; }
- 静态定位按照标准流特性来摆放位置,他没有边偏移
- 静态定位在布局中很少用到
相对定位 (relative)(重要)
相对定位是元素在移动位置的时候,是相对于它原来的位置来说的
语法:
选择器 {position: relative; }
相对定位特点:(务必记住)
- 它是相对于自己原来的位置来移动的(移动位置的时候参照点是自己原来的位置)
- 原来在标准流的位置继续占有,后面的盒子仍然以标准流的方式对待它(不脱标,继续保留原来位置)
绝对定位(absolute)(重要)
绝对定位是元素在移动位置的时候,是相对于他的祖先元素来说的
语法:
选择器 {position: absolute; }
绝对定位特点(务必记住)
- 如果没有祖先元素或者祖先元素没有定位,则以浏览器为准定位(Document文档)
- 如果祖先元素有定位(相对、决对、固定定位)则以最近一级的有定位的祖先元素为参考点移动位置。
- 绝对定位不占有原来的位置(脱标)
子元素用绝对定位,父元素要用相对定位
固定定位 fixed(重要)
固定定位是元素固定于浏览器可视区的位置,主要使用场景可以在浏览器页面滚动时元素的位置不会改变
语法:
选择器 {position: fixed; }
固定定位的特点:(务必记住)
- 以浏览器的可视窗口为参照点移动元素
跟父元素没有任何关系
不随滚动条滚动
- 固定定位不占有原先位置
固定定位也是脱标的,其实固定定位可以看作时一种特殊的绝对定位
固定定位小技巧:固定在版心右侧位置
小算法:
- 让固定定位的盒子left:50%走到浏览器可视区(也可以看作版心)的一半位置
- 让固定定位的盒子margin-left:版心宽度的一半距离,多走版心宽度的一半位置就可以让固定定位的盒子贴着版心对齐了
粘性定位sticky(了解)
粘性定位可以被认为是相对定位和固定定位的混合。Sticky 粘性的
语法:
选择器 {position: sticky; top: 10px; }
粘性定位的特点:
- 以浏览器的可视窗口为参照点移动元素(固定定位特点)
- 粘性定位占有原先的位置(相对定位特点)
- 必须添加top、left、right、bottom其中一个才有效
跟页面滚动搭配使用。兼容性较差,IE不支持
定位叠放次序 z-index
在使用定位布局时,可能会出现盒子重叠的情况,可以使用z-index来控制盒子的前后次序(z轴)
语法:
选择器 { z-index: 1; }
- 数值可以是证书,负整数或0,默认时auto,数值越大,盒子越靠上
- 如果属性相同,则按照书写顺序,后来居上
- 数值后面不能加单位
- 只有定位的盒子才有z-index属性
定位的特殊性:
绝对定位和固定定位也和浮动类似
- 行内元素添加绝对或者固定定位,可以直接设置高度和宽度
- 块级元素添加绝对或者固定定位,如果不给宽度或者高度,默认大小是内容大小
- 脱标的盒子不会触发外边距塌陷
- 浮动元素、绝对定位(固定定位)元素都不会触发外边距合并问题
- 绝对定位(固定定位会完全压住盒子)
- 浮动元素不通,只会压住它下边标准流的盒子,但是不会压住下面标准流盒子里面的文字、图片
- 但是绝对定位(固定定位)会压住下面标准流所有的内容
元素的显示与隐藏
类似网站广告,当我们点击关闭就不见了,但是我们重新加载页面,会重新出现
本质:让一个元素在页面中隐藏或显示出来
- display 显示隐藏
- visibility 显示隐藏
- overflow 溢出显示隐藏
Display属性
- display:none ;隐藏对象
- display:block ;除了转换为块级元素之外,同时还有显示块级元素的意思
- display隐藏元素后,不再占用原来的位置
visibility可见性
visibility属性用于指定一个元素应可见还是隐藏
- visibility:visible;元素可视
- visibility:hidden;元素隐藏
- visibility隐藏元素后,继续占有原来的位置
- 如果隐藏元素想要原来的位置,就用visibility:hidden
- 如果隐藏元素不想要原来的位置,就用display:none(用处更多 重点)
overflow溢出
属性值 | 描述 |
visible | 不剪切内容也不添加滚动条 |
hidden | 不显示超过对象尺寸的内容,超出的部分隐藏掉 |
scrllo | 不管超出的内容与否,总是显示滚动条 |
auto | 超出自动显示滚动条,不超出不显示滚动条 |
一般情况下,我们都不想让溢出的内容显示出来,因为溢出部分会影响布局。但是如果有定位盒子,请慎用overflow:hidden 因为会隐藏多余部分
更多推荐
【CSS】CSS基础标签(三)
发布评论