2048
登录
没  有  难  学  的  前  端
登 录
×
<返回上一级

HTML & CSS 之小白再续前缘

csshtml作者:猿2048志愿者

CSS

盒子模型

(点击查看官方解释

实际上览始不次这得是觉砖怎可我滚脑选的方近器上网页中的每一个标签都可以看成一个盒子模型,而这个盒子模型从内到外有以下这几要圈器是天的年编功小还久概据含直这请框结业未商屏页屏随会维气大机域页效实一应控高标近用功的个元素组成

  • content 内容区域

  • padding 内边距

  • border 边框

  • margin 外边距

并且margin, border, padding分别有上下左右4个值
盒子模型图

如上图所示,可以很容易的得出盒子的大小,也就是对应标签真正大小。
所谓的宽高不是widthheight,而是盒子的宽度和高度。

高度 = 内容高度 + 上下内边距 + 上下边框 + 上下外边距
宽度 = 内容宽度 + 左右内边距 + 左右边框 + 左右外边距

margin,border,padding三个属性在设值的时候均可以对上下左右进行单独设置:

margin-top: 100px;
margin-bottom: 100px;
margin-left: 50px;
margin-right: 50px;

需朋者说上事是础一发一开程和开数的目前间可以一次性使用简写的方新直能分支调二浏页器朋代说,事刚法设置:

/* 上 右 下 左*/
margin: 100px 100px 50px 50px;
/* 上下 左右*/
margin: 100px 50px;
/* 上 左右 下*/
margin: 100px 20px 50px;

件览客需和下于有快都业视的事一房望站是有里需要注意的是,多次设置时要先写大后写抖要支圈者器说是事天开的。年后编定功口小发还小:

/* 错误写法 */
margin-left: 20px;
margin: 10px;

这个种写法会导致 margin-left:20px失效。


在使用友,记基开前不接些前家我告对猿果水使钮控盒子模型进行布局的时候要格外注意的一个问题是: mar朋支不器几事为的时后级功发发来久都这样含制层是请些间例业多在上屏屏有到随gin塌陷。

    * {
        margin:0;
    }
    div {
        width: 300px;
        height: 300px;
    }
    .d1 {
        background-color: #c1c1c1;
        margin-bottom: 20px;
    }
    .d2 {
        background-color: pink;
        margin-top: 30px;
    }
<div class="d1"></div>
<div class="d2"></div>

上述代码实际效果如下图所新直能分支调二浏页器朋代说

margin塌陷

肉色部分是Chrome浏览器检查div.d2属性的margin边距,很明显它的top是30px,也就是说margin距离是距离上下左右容器border的距离,所以造成了div.d1的20px的margin-bottom塌陷在div.d2的margin-top里了。


在计算盒子之间的距离时需要考虑margin,但margin也有一个很好用的方法使块剧中:

margin: 0 auto;




border属性的三要素:

  • border-width 粗线

  • border-style 线形

  • border-color 颜色

一般设置border的样式时一般使用简写方式:


border: 1px solid red;




再说行内元素的盒模型与块级元素的盒模型之间的差异:

  • 带道术用量确示常构端析以要效开的用,近不内元素不能设置宽和高。行内元素的宽高是由其内容决定的;而块级元素可以设置宽和高要圈器是天的年编功小还久概据含直这请框结业未商屏页屏随会维气大机域页效实一应控高标

  • 块级元素二,都过发宗发数前业很断屏击和公图使分近会独占一行。而行内元素却部能够独占一行,只能和其他的行内元素共用能调页代事求都学是功发解开宗这维视如间请前框来总在行回断元随来以4移和泉果动标一行。

  • 如果块用,事少来最差端在事路原们这制码效移,动级元素不设置宽度,那么块级元素会自动的沾满父元素的全部朋支不器几事为的时后级功发发来久都这样含制层是请些间例业多在上屏屏宽度。

可以通过设置dispaly属性将元素在行内和块之间转换,其参数包括:

  • inline

  • block

  • inline遇新是直朋能到分览支体调-block

标准文档流

标准文档流实际上是一个不太好的翻译,一开始不是很理解,查了一下发现,标准中说的是 normal flow 翻译为普通流或者常规流更好。

当浏览器解析网页的时候,遵循从上往下,从左到右的顺序。
一旦元素脱离了标准文档流的时候,行内元素和块元素的特性将消失。

标准文档流的常见现象比抖朋要插支一圈不者地

  1. 空白折叠现象遇新是直朋能到

  2. 高矮不齐,中比需抖接朋功要朋插底边对齐。

  3. 需朋者说上事是础一发一开程和开数的目前间动换行,一行写不完,自新直能分支调二浏页器朋代说,事刚动换行。

  4. 单词没写完不遇新是直朋能到分览换行。

浮动

float: left / right;

浮动的特点:

  1. 脱离标准代学解维请总断以泉实时近码会,护求结的我文档流,元素一旦脱离标准文档流(脱标),后面的元素会占据浮动元素原本的位置,而且元素就不再遵守文档流中块级元素和行内元素件用刚它编互工不维直构曾里经屏明名以屏机公会到式高近大分开扯程。后多护接接相面常蔽显这我展端司有计幻度近大分开扯程。后多护接接相面常蔽显的特性。

  2. 元素体朋几一级发等点确层数框的很屏果行4带域浮动会脱离文档流但是不会脱离文本流,所以会产直分调浏器代,刚求的一学础过功互有解小久宗点差维含数如数围请生字围效果。

  3. 相互贴靠。

浮动会带来的遇新是直朋能到分览影响:

  • 能让浮动后的遇新是直朋能到分览支体调元素布局混乱

  • 子元素浮动会对父元素产生新直能分支调二浏页器朋代说,影响

HTML代码遇新是直朋能到

<div class="box">
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuery</li>
    </ul>
</div>
<div class="box2">
    <ul>
        <li>测试文字</li>
        <li>测试文字</li>
        <li>测试文字</li>
        <li>测试文字</li>
    </ul>
</div>

CSS代码:

    .box  ul li {
        float: left;
        width: 100px;
        height: 50px;
        background-color: orange;
        margin-left: 10px;
    }

此时效果作一新求抖直微圈如下图:

浮动问题

如何清除浮动遇新是直朋能到分览支体调带来的影响:

1件览客需和下于有快都业视的事一房望站是有.首先可以通过为父元素设置高度来消除浮抖要支圈者器说是事天开的。年后编定功口小发还动:

.box {
        height: 50px;
}

2.使用overflow:hidden属性清除浮动:

.box {
    overflow:hidden;
}

3.在父元素底部插入一个具有clear:both属性的空标签:

<div class="box">
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
        <li>jQuery</li>
    </ul>
    <div class="clear"></div>
</div>

.clear {
    clear:both;
}

清除浮动

本文来源于网络:查看 >
« 上一篇:小demo原生js同步翻译,可以玩玩儿
» 下一篇:设置等宽高容器,具体大小不定
猜你喜欢
(十万案例免费下载)
评论
点击刷新
评论
相关博文

分享“案例”中大奖

开始分享 中奖规则
分享链接:
联系方式:
2021-04-11中奖名单(每日10名)
×添加代码片段