HTML-CSS布局-4

HTML-CSS布局相关元素小心得

<pre>
在这里分享给大家一些HTML-CSS的相关知识,供新人学习,老人查阅,共勉。
------DanlV
</pre>

标准文档流

网页在解析的时候,遵循从上向下,从左向右的一个顺序,而这个顺序就是标准文档流。 标准文档流 -- 》 定义了标签的特性以及网页的解析顺序 。标准文本流 -- 》 指的是网页中文字
如果想要让行内元素和块级元素不再遵循本身的特性,除了转换 (display)以外,还可以通过float和position来实现。*因为通过float(浮动) 和 position(定位) 可以让元素脱离"标准文档流"。
TIPS:
1. position 定位可以让元素即扩里文档流,也脱离文本流
2.float 让元素脱离了标准文档流,但是没有让元素脱离标准文本流

遵循规则

  • 网页解析顺序 :上 - > 下 左 -> 右
  • 块级元素和行内元素的规则:
    1.块级元素自己霸占一行 ,不能与其他元素并列显示;可以设置宽度和高度;如果不设置宽度,块级元素会默认沾满整个父元素的宽;
    2.行内元素能够与其他的行内元素并排显示;不能够设置宽度和高度,宽度是内容的宽度,高度是内容的高度;
  • 高矮不齐,底边对其
  • 单词写满一行,自动换行
  • 如果单词没有写完(没有空格),那么单词不换行
  • 一个元素摆脱标准文档流限制的三种方式
    1.浮动
    2.绝对定位
    3.固定定位

盒子模型

CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。
我们把网页中任意一个元素都称之为盒子模型。

原理

内容(content)、填充(padding)、边框(border)、边界(margin), CSS盒子模式都具备这些属性。
这些属性我们可以把它转移到我们日常生活中的盒子(箱子)上来理解,日常生活中所见的盒子也就是能装东西的一种箱子,也具有这些属性,所以叫它盒子模式。

属性

1.width、height指的是盒子中内容的宽度和高度
2.padding--内边距指的是内容距离盒子边框的距离 (在写css代码的时候,能够使用简写就不要使用其他的写法。)

width: 300px;
height: 300px;
border: 2px solid purple;
background-color: orange;
margin: 1px;
/*上下左右内边距都死10px*/
padding: 10px;
/*上下为10px 左右为20px*/
padding: 10px 20px;
/*上为10px 左右为20px 下为30px*/
padding: 10px 20px 30px;
/*上为10px 左为20px 下为30px 右为40px*/
padding: 10px 20px 30px 40px;

3.margin塌陷现象:两个盒子分别设置左边距,右边距,显示的结果显示值大的一个边距。

div {
    width: 300px;
    height: 200px;
    /*display: inline-block;*/
    float: left;
}
.d1 {
    background-color: red;
    /*margin-bottom: 20px;*/
    margin-right: 20px;
}
.d2 {
    background-color: blue;
    /*margin-top: 30px;*/
    margin-left: 10px;
}

<div class="d1"></div>
<div class="d2"></div>

4.盒子居中
.test {
width: 300px;
height: 300px;
background-color: red;
margin: 100px auto;/将左右的margin设置为auto将会居中/
}
<div class="test"></div>

浮动

浮动,让元素脱离标准文档流,float:left/right。

浮动的特性

  • 元素脱离标准文档流
  • 存在相互贴靠的效果
  • 字围

清除浮动方案

因为浮动会使当前标签产生向上浮的效果,同时会影响到前后标签、父级标签的位置及 width height 属性。
而且同样的代码,在各种浏览器中显示效果也有可能不相同,这样让清除浮动更难了。
解决浮动引起的问题有多种方法,但有些方法在浏览器兼容性方面还有问题。

  • 父级定义height,只适合高度固定的布局,要给出精确的高度,如果高度和父级div不一样时,会产生问题

  • 父级元素结尾处加空div标签设属性clear:both(内墙法)

  • 父级元素之后加空div标签设属性clear:both(外墙法)

    <style>
    li {
    list-style: none;
    }

          .box1 ul li {
              float: left;
              width: 30px;
              height: 40px;
              margin-left: 10px;
              background-color: orange;
          }
          
          .clear {
              clear: both;
          }
      </style>
    

    </head>
    <body>
    <div class="box1">
    <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    </ul>


    </div>

    <div class="clear"></div>

      <div class="box2">
          <ul>
              <li>11</li>
              <li>22</li>
              <li>33</li>
              <li>44</li>
          </ul>
      </div>
    

    </body>

  • 父级div定义伪类:after和zoom
     <style type="text/css"> 
       .div1 {
            background: #000080;
            border: 1px solid red;
            }
       .div2 {
            background: #800080;
            border: 1px solid red;
            height: 100px;
            margin-top: 10px
            }
       .left {
            float: left;
            width: 20%;
            height: 200px;
            background: #DDD
            }
       .right {
            float: right;
            width: 30%;
            height: 80px;
            background: #DDD
            }
       
       /*清除浮动代码*/
       .clearfloat:after{
            display: block;
            clear: both;
            content: "";
            visibility: hidden;
            height: 0
            }
       .clearfloat { 
            zoom: 1
            }
       </style> 
    <div class="div1 clearfloat"> 
    <div class="left">Left</div> 
    <div class="right">Right</div> 
    </div>
    <div class="div2">
       div2
    </div>
  • 父级div定义overflow:hidden,不能和position配合使用,因为超出的尺寸的会被隐藏

  • 父级div定义overflow:auto,内部宽高超过父级div时,会出现滚动条

  • 父级div也一起浮动,可能会产生新的浮动问题

  • 父级div定义display:table,将div属性变成表格,可能产生新的未知问题

      <style type="text/css"> 
         .div1 {
          background: #000080;
          border: 1px solid red;
          width: 98%;
          /*解决代码*/
          display: table;
          margin-bottom: 10px;
          }
         .div2 {
          background: #800080;
          border: 1px solid red;
          height: 100px;
          width: 98%;
         }
         
         .left {
          float: left;
          width: 20%;
          height: 200px;
          background: #DDD
         }
      
         .right {
          float:  right;
          width: 30%;
          height: 80px;
          background: #DDD
         }
         </style> 
      <div class="div1"> 
      <div class="left">Left</div> 
      <div class="right">Right</div>
      </div>
      <div class="div2">
         div2
      </div>
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,602评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,442评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,878评论 0 344
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,306评论 1 279
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,330评论 5 373
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 49,071评论 1 285
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,382评论 3 400
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 37,006评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,512评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,965评论 2 325
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,094评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,732评论 4 323
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,283评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,286评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,512评论 1 262
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,536评论 2 354
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,828评论 2 345

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,728评论 1 92
  • 一、在什么场景下会出现外边距合并?如何合并?如何不让相邻元素外边距合并?给个父子外边距合并的范例 在CSS当中,相...
    dengpan阅读 564评论 0 0
  • 前言: 1.HTML5的发展非常迅速,可以说已经是前端开发人员的标配,在电商类型的APP中更是运用广泛,这个系列的...
    珍此良辰阅读 1,912评论 2 15
  • 1.行内元素和块级元素?img算什么?行内元素怎么转化为块级元素? 行内元素:和有他元素都在一行上,高度、行高及外...
    极乐君阅读 2,402评论 0 20
  • 今天吴春花老师上了一堂研讨课《巨人的花园》,将语文课堂教学渗透心理学知识,首先这种探索的勇气令我敬佩。 ...
    美廷阅读 218评论 0 2