CSS的基本认识

几个认识:

一般行内元素是在同一行横向排列的;;;块级元素元素会占满整个一行,总是换行,在页面中竖向排列。【但是可以设置display,改变块或行元素原来的属性,display:inline(块改成行),display:block(行改成块)】

注意1:disPlay:inline-block,(此时是既具有行元素的横向排列,又具有块元素的可设置宽高等)

注意2:disPlay:none,(隐藏元素,一些设置的属性也会隐藏)

常见的块内元素:<div> <p> <h1> <form> <ul> <li>和h5新增的一些标签(header、section、footer)等标签。

常见的行内元素:<span> <a> <label> <input> <stong> <img>的是行内标签。

CSS3特殊部分:新增display:flex  或display:inline-flex 使元素为弹性盒子,是一个全新的布局方式,也分为块级和行内级,(块级和行级)基本思想是一样的。


盒子浮动:顾名思义,浮动就是可以是元素相互叠加,

属性:float,默认是none,如果设置left、right,元素就会向其父元素左侧或右侧靠近,一旦设置浮动,这个文档就会是3D了,被设置的元素就不会当做下一个元素布局的参照了,(相当于被设置元素被他后面的元素抛弃了,但被设置元素之前的元素都是正常的,(相对于被设置元素也是正常的)),,,此时被设置元素的下一个元素可能会受到影响(被盖住等等)如果不想受影响,此时可以设置下一个元素clear(清除浮动)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 14,692评论 1 92
  • 移动开发基本知识点 一.使用rem作为单位 html { font-size: 100px; } @media(m...
    横冲直撞666阅读 8,912评论 0 6
  • H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解dis...
    Mx勇阅读 10,137评论 0 26
  • 1.CSS基本概念 1.1 CSS的定义 CSS(Cascading Style Sheets)层叠样式表,主要用...
    寥寥十一阅读 5,927评论 0 6
  • 文康, 端午节回家了,和你面谈了一下,发现了几个问题,当时和你谈了一下,这里想以家书的方式再和你聊一聊。 你的问题...
    wenju_song阅读 5,384评论 1 1

友情链接更多精彩内容