资讯专栏INFORMATION COLUMN

CSS的再深入3(更新中···)

RayKr / 2963人阅读

摘要:而第一个依然存在,所以就会叠加。宋体行级加只要加了,这个元素就会脱离标准文档流行级元素加了,脱离了标准文档流,会变得块不像块,行不像行,能设置快高,能并排排列,则也不用给行级标签加了,没有意义。

在前面,我们学习了标准文档流,但在实际制作的过程中,用标准文档流书写显然是不现实的,因此,我们来了解几种脱离标准文档流的方法:

1.float 浮动

float:left/right;(左浮/右浮)

效果:元素都加浮动,后面的元素紧跟前面的元素并排排列

第一个加了float,脱离了标准文档流,对于浏览器来说,第二个元素就变成了标准文档流中的第一个,于是就会把他排在第一位。而第一个依然存在,所以就会叠加。

行级加float

 

A.只要加了float,这个元素就会脱离标准文档流;行级元素加了float,脱离了标准文档流,会变得块不像块,行不像行,能设置快高,能并排排列,则

也不用给行级标签加display了,没有意义。(行级块也是块不像块,行不像行)

B.浮动的元素会贴靠在一起

C.浮动的元素会文字环绕

 

浮动带来的坏处

1,给元素加了浮动,撑不起父级的高度了

 

清除浮动

  1. 给浮动的父元素添加高度
  2. 给父级添加overflow:hidden;
  3. 给浮动元素的后面添加一个空的div 添加样式为clear:both

   

  4.给浮动元素的父级添加一个类叫clearfix

  这个类写的样式属性有

  

 (伪类选择器:只要选择器后面带:的都可以说是伪类选择器

  超链接的四种状态

  a:link{} 正常的状态

  a:visited{} 访问过后的状态

  a:hover{} 鼠标悬浮的状态

  a:active{} 激活,鼠标点击时的那一刻的状态

  a的四种状态的顺序不能变

  

  伪元素和伪类选择器的区别:

  伪元素有两个冒号,如p::after{}

  伪类选择器有一个冒号,如p:hover{}

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/1719.html

相关文章

  • css的再深入6(更新3;3;3;)

    摘要:宋体雪碧图宋体我们的宋体和宋体中有三个属性可以向服务器发送请求,宋体。宋体类型,客户端和服务器之间的暗号,根据拓展名而定。注内容包含图片和文字 background-position  雪碧图 我们的html和css中有三个属性可以向服务器发送请求,src href url。 overflow   (1) 值hidden 超出就隐藏   (2) 值scroll  出现滚动条   vis...

    Bowman_han 评论0 收藏0
  • css的再深入8(更新3;3;3;)

    摘要:宋体去滚动条的属性宋体水平超出的隐藏。往往需要设置宋体为宋体滚动标签他身上所具有的功能有标签属性决定。1.去滚动条的属性 overflow:hidden;   overflow-x:hidden; 水平超出的隐藏。 2.z-index 层次叠加 元素重叠 谁的值大谁在上面   (1) 父级出现position:relative;时候z-index失效   (2) 层叠元素出现float的时候...

    chuyao 评论0 收藏0
  • css的再深入7(更新3;3;3;)

    摘要:宋体可以继承的属性有哪些宋体系列宋体系列宋体的值的问题宋体四个值的顺序是宋体左上宋体右上宋体右下宋体左下。宋体在宋体下宋体为负让元素居中,前提是知道元素的宽高。宋体如宋体正常状态宋体宋体设值时1.transparent 透明的 2.placeholder 提示语 写页面 搞清结构层次, 保证模块化,让他们之间不能受到影响 (1)元素性质 (2)标准流 浮动带来的脱离文档流撑不起父级的高度...

    番茄西红柿 评论0 收藏0
  • css的再深入9(更新3;3;3;)

    摘要:宋体二宋体浏览器浏览器和浏览器之间是由差距的,这个差距是由浏览器自身的内核决定的。宋体每个浏览器都有自己的前缀,主要解决宋体中的兼容问题。宋体是弹性子元素在弹性容器中所占的份数。一 单位 1.px 就是一个基本的单位 像素 2.em 也是一个单位 用父级元素的字体大小乘以em前面的数字。如果父级没有就继承上一个父级直到body,如果body没有那就默认是16px。 3.rem 也是一个单位,...

    yexiaobai 评论0 收藏0
  • CSS的再深入2(更新3;3;3;)

    摘要:层叠行选不中的情况下,走继承性。继承性的权重为。选中情况下,首先需要考虑权重的问题,谁的权重大,就选谁的样式属性。如果权重相同,因为后者会覆盖前者,所以谁的样式属性在后面,就选择谁的样式属性。在上一章中,我们又引出了一个知识点: margin的问题 margin:0 auto;(上下为0,左右自适应)会解决元素的居中问题(auto 自适应)前提是给这个元素设置width 同时,我们又要学习新...

    enrecul101 评论0 收藏0

发表评论

0条评论

RayKr

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<