HTML/CSS基础

HTML/CSS基础

目录

  • 盒模型
  • margin叠加
  • 块级元素和内联级元素
  • z-index属性
  • 浮动

盒模型

content-box(默认)

  • 布局所占宽度Width Width = width + padding-left + padding-right + border-left + border-right
  • 布局所占高度Height Height = height + padding-top + padding-bottom + border-top + border-bottom

padding-box

  • 布局所占宽度Width Width = width(包含padding-left + padding-right) + border-top + border-bottom
  • 布局所占高度Height Height = height(包含padding-top + padding-bottom) + border-top + border-bottom

border-box

  • 布局所占宽度Width Width = width(包含padding-left + padding-right + border-left + border-right)
  • 布局所占高度Height Height = height(包含padding-top + padding-bottom + border-top + border-bottom)

margin叠加

一种情况-父子元素叠加

子元素的外边距隔着父元素的内边距和边框. 当这两项都不存在的时候, 父子元素垂直外边距相邻, 产生叠加.

解决方法

  • 添加父元素的内边距和边框任何一项即可取消叠加
  • 给父元素加上样式即可
overflow: hidden;

块级元素和内联级元素

根据display属性,可以将元素分为块级元素(block)和内联级元素(inline)。

最大区别

  • block元素 可以设置宽度,独占一行。
  • inline元素 宽度由内容决定,与其他元素并列在一行。

元素举例

  • block元素
div, h1-h6, ul, li, ol, dl, dd, dt
  • inline元素
span, a, em

inline-block

宽度可以自行设置,类似block,但是与其他元素共占一行,类似inline. 常用于设置垂直居中.

z-index属性

定义

设置元素的堆叠顺序

用法

拥有更高堆叠顺序的元素总是会处于堆叠顺序较低的元素的前面

注意

  • 可拥有负的 z-index 属性值
  • 仅能在定位元素上奏效

浮动

定义

使元素脱离文档流,按照指定方向发生移动,遇到父级边界或者相邻的浮动元素停下来

清除浮动

.clearfix:after {
    content:'';
    display:block;
    clear:both;
}
.clearfix {
    *zoom:1;
}

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • js实现简易拖拽

    scrollWidth:对象的实际内容的宽度,不包括边线宽度 clientWidth:对象内容的可视区的宽度,不包括边线宽度 offsetWidth:对...

    星辉
  • python3脚本打开摄像头

    brew install opencv3 用来指明安装python3版本的opencv。

    星辉
  • jq和zepto

    星辉
  • 在未知长度的超大数组中线性时间内查找第k大的元素

    给定一个长度为n的数组,n是一个很大的值,而且事先不知道n的大小,给定一个确定的数值k,要求设计一个找出数组中第k大的元素,要求算法需要的空间不能超过O(k)。

    望月从良
  • 排序算法(七):快速排序

    快速排序是通过分治的方式,根据选定元素将待排序集合拆分为两个值域的子集合,并对子集合递归拆分,当拆分后的每个子集合中元素个数为一时,自然就是有序状态。

    zhipingChen
  • 各大排序算法的Objective-C实现以及图形化演示比较

    插入排序是从一个乱序的数组中依次取值,插入到一个已经排好序的数组中。 这看起来好像要两个数组才能完成,但如果只想在同一个数组内排序,也是可以的。此时需要想象出两...

    哲洛不闹
  • py+selenium IE 定位到元素,但点击不了元素的问题【已解决】

     参考:https://www.cnblogs.com/gihyuqinqin/p/8067685.html

    逆向小白
  • 算法一看就懂之「 插入排序 」

    今天咱们来看一看「 插入排序 」。「 插入排序 」与「 冒泡排序 」一样都属于时间复杂O(n*n)的排序算法,并且也都是基于元素之间比较的方式来完成排序的。不过...

    奎哥
  • leecode刷题(27)-- 合并k个排序链表

    以前做过合并两个有序链表的问题,所以刚开始想到的解法与之类似,我们可以先合并两个有序链表,再用合并的新链表去合并第三个链表:

    希希里之海
  • Python基础知识之二:正则表达式常用功能细解!

    其实正则在我的爬虫中已经用的不是很多了,用xpath的网页标签去找内容,容易理解也方便多了,但是不用正则不是因为有更好的方法,而是正则用的好用的精通很难,比如各...

    云飞

扫码关注云+社区

领取腾讯云代金券