CSS盒子模型和浮动_yxyq1210的博客-程序员宅基地

技术标签: css  html5  css盒子模型  css浮动  

CSS盒子模型和浮动

一盒子模型

1、什么是盒子模型

  1. 盒子模型是CSS中重要的指导思想,是网页布局的基石

  2. 它认为页面中所有元素都是一个盒子,可以通过设置它的属性进而改变该盒子的显示状态

  3. 它认为盒子间是相互影响的

2、盒子模型中常用的盒子属性

  1. width:设置盒子的内容的宽度,属性值为像素值或百分比,如果是块元素默认宽度为父元素的100%,如果是行内元素默认宽度为内容的宽度

  2. height:设置盒子内容的高度,属性值为像素值或百分比,元素的默认高度为自适应高度

  3. border:设置元素的边框

    1) border-style:设置边框类型,属性值有solid、dashed、dotted、none

    ​ solid:实线

    ​ dashed:虚线

    ​ dotted:点线

    ​ none:无

    2) border-width:设置边框宽度,属性值是像素值,值越大,边框越宽

    3) border-color:设置边框颜色,属性值为颜色名称、十六进制代码

    4) border的复合形式:border:值1 值2 值3;注意边框的类型是不可以省略的

    5) 上边框:border-top

    6) 下边框:border-bottom

    7) 左边框:border-left

    8) 右边框:border-right

    9) border-radius:设置边框圆角效果,属性值为像素值

    10) border-top-left-radius:左上角

    11) border-bottom-left-radius:左下角

    12) border-top-right-radius:右上角

    13) border-bottom-right-radius:右下角

    14) border-radius:值,表示四个角的弧度相同

    15) border-radius:值1(左上、右下) 值2(右上、左下)

    16) border-radius:值1(左上) 值2(右上、左下) 值3(右下)

    17) border-radius:值1(左上) 值2(右上) 值3(右下) 值4(左下)

  4. margin:设置页面中元素间的距离,称为外边距,属性值为像素值,值越大,距离越大

    1) margin-top:上外边距

    2) margin-bottom:下外边距

    3) margin-right:右外边距

    4) margin-left:左外边距

    5) 也可以采用值的个数表示上下左右外边距,如

    ​ margin:值,表示,四个边距相同

    ​ margin:值1(上下) 值2(左右)

    ​ margin:值1(上) 值2(左右) 值3(下)

    ​ margin:值1(上) 值2(右) 值3(下) 值4(左)

    6) 注意事项:两个上下关系的元素间的距离采用较大的margin值,而不是和,但是如果是左右关系的元素,那么它们间的距离就是margin之和

  5. padding:设置盒子内容和边框的距离,也称为内边距,属性值为像素值,值越大,间距越大

    1) padding-top:上内边距

    2) padding-bottom:下内边距

    3) padding-left:左内边距

    4) padding-right:右内边距

    5) 也可以通过值的个数来表示内边距

    ​ padding:值,表示上下左右相同

    ​ padding:值1(上下) 值2(左右)

    ​ padding:值1(上) 值2(左右) 值3(下)

    ​ padding:值1(上) 值2(右) 值3(下) 值4(左)

3、什么时候用margin,什么时候用padding

  1. 如果两个元素是平行关系(即兄弟关系)时,要调节它们的间距只能用margin

  2. 如果两个元素是包含和被包含的关系(即父子关系)时,那么要调节它们间的距离可以用margin(子元素),也可以用padding(父元素),注意:当给子元素加margin-top时会出现父元素同步下移的问题,解决方法如下:

    ​ 1) 不给子元素加margin-top,给父元素加padding-top

    ​ 2) 给子元素加margin-top,给父元素加边框

    ​ 3) 给子元素加margin-top,给父元素加pading-top:0.1px;(常用)

4、margin和padding使用技巧

  1. 利用*{margin:0;padding:0}清除页面中默认的内外边距

  2. 利用margin: 0 auto使元素在页面中达到居中效果,该方法只适用于块元素

5、盒子的实际高度和宽度(标准盒模型)

  1. 实际宽度=左边框+左内边距+width+右内边距+右边框

  2. 实际高度=上边框+上内边距+height+下内边距+下边框

6、CSS3中box-sizing:border-box可以将标准盒模型变为怪异盒模型,所谓怪异盒模型就是width包含了边框和内边距,就不用再减了

一般在页面布局中加这个*{

margin=0;padding=0;box-sizing:border-box;

}

二、浮动

1、属性:float,属性值left、right、none

  1. left:元素向左浮动

  2. right:元素向右浮动

  3. none:元素不浮动,默认

2、什么是浮动:所谓浮动就是指设置了float属性的元素会从标准文档流中脱离出来,在浮动流中按照新的排列规则进行排列

  1. 标准文档流:所谓标准文档流就是页面默认的排列规则,如果是块元素垂直显示,如果是行内元素或行内块元素在一行显示

  2. 浮动流:所谓浮动流就是设置了float属性的元素会从标准流中脱离出来,在标准流的上方新建一个层,在这个成里所有元素都是在一行显示的,我们把这种排列规则称为浮动流

3、浮动所带来的影响

  1. 设置了浮动属性的元素会从标准流中脱离出来,它会失去在标准流中的原有位置,该位置会被标准流中的其它元素占据

  2. 在浮动流中所有元素都是在一行显示的,但是如果空间不够大,那么元素自动换行

  3. 浮动的元素自动变成块元素

  4. 浮动的元素宽度为最小宽度,所以为了方便控制,通常给浮动的元素加width

  5. 浮动的元素会丢失标准流中的原有位置,标准流中的其它元素会占据它的空间,但是文本会对它形成环绕

  6. 一个元素在浮动前会分析它前面的元素的类型,如果是块元素,那么这个元素会在块元素的下方显示

  7. 元素都向右浮动后,显示顺序为倒叙

4、父元素的塌陷:如果父元素没有高度,那么此时父元素的高度就是由子元素决定的,如果子元素设置了浮动,那么父元素的高度就会塌陷,父元素的背景色无法显示,另外也会对周边元素造成影响

  1. 给父元素设置高度

  2. 利用clear属性来清除浮动所带来的影响,clear属性的作用就是清除浮动,属性值为left /right/both/none

    1) left:清除左侧的浮动

    2) right:清除右侧浮动

    3) both:清除两侧浮动

    4) none:默认,不清除浮动

  3. 利用:after选择器清除浮动,格式:父元素:after{content:””;display:block;clear:both;}

5、浮动的利用

  1. 页面布局

  2. 制作页面中各个模块

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/yxyq1210/article/details/76572440

智能推荐

人才外包的Offer要不要拿?_tianyalangzi1005的博客-程序员宅基地_维朗科技是外包吗

近日,有网友问:在维朗科技通过了国内大型游戏品牌WY的测试工程师初次面试,但也同时了解到如果复试通过,并不是直接与WY签合同,而是与维朗科技签外包合同,不算WY的正编职工。但在工作满半年之后,有机会转为WY的正式员工。这种外包合同是否值得签?小编首先认为这一外包合同是值得签的。在这里需要正确认识什么是人才外包。人才外包是近几年兴起的全新用工方式,属于灵活用工的一种,也被解读为人才租赁,维朗科技正是...

'libxml/tree.h' file not found_weixin_33834910的博客-程序员宅基地

为什么80%的码农都做不了架构师?>>> ...

linux 符号命名意思,Linux中的常用符号解释_顾不得的博客-程序员宅基地

一、通配符:“*”、“?”和DOS下一样,当我们不知道确切的文件名时,可以用通配符来进行模糊操作。“*”可以代表任意长度的任意字符,“?”代表一个任意字符。二、转义字符:“/”和DOS的命名规则不同的是,通配符“*”、“?”是可以在文件名中使用的。如果要操作的文件名中包含有这些特殊符号,我们可以结合“/”来表达。下面是通配符和正则表达式的一个简短列表:* 匹配所有字符? 匹配字串中的一个字符/* ...

计算机的新技术未来发展趋势论文,计算机最新技术发展趋势毕业论文_大郎神的博客-程序员宅基地

为毕业生写计算机最新技术发展趋势毕业论文提供计算机最新技术发展趋势毕业论文范文参考,涵盖硕士、大学本科毕业论文范文和职称论文范文,包括论文选题、开题报告、文献综述、任务书、参考文献等,是优秀免费计算机最新技术发展趋势毕业论文网站。中国计算机的发展趋势摘 要:中国计算机硬件是新技术革命的一支主力,也是推动社会向现代化迈进的活跃因素。计算机科学与技术是第二次世界大战以来发展最快、影响最为深远的新兴学。...

linux shell程序设计实验报告,linux-shell编程实验报告_梦终会碎的博客-程序员宅基地

《linux-shell编程实验报告》由会员分享,可在线阅读,更多相关《linux-shell编程实验报告(8页珍藏版)》请在金锄头文库上搜索。1、LINUX管理与应用课程实验报告实验内容和目的实验目的:理解Shell程序的设计方法;熟悉Shell程序编辑、运行、调试方法与过程。实验内容:(1)Shell 简单编程用户名回显程序;if-then、if-then-else语句使用;for语句、whi...

linux+用户的shell,linux更换用户_更改linux用户登录shell的方法_动妈-游戏力育儿的博客-程序员宅基地

摘要 腾兴网为您分享:更改linux用户登录shell的方法,幸福钱庄,小学英语,我和你,万科物业等软件知识,以及光大app,视频解码包,dns修改软件,天天小说阅读器,微信跳一跳,企业管家,蚂蚁邦,口袋听听,汤家凤考研数学视频,初音未来桌面壁纸,耀莱成龙影院,三维gis软件,图片库软件,景深计算器,华中科技大学软件等软件it资讯,欢迎关注腾兴网。更改linux用户登录shell的方法,感兴趣的朋...

随便推点

android wifi p2p框架,7.2.1 P2P架构_读库御宅学的博客-程序员宅基地

P2P架构中定义了三个组件,笔者将其称之为一个设备,两种角色。这三个组件分别是:* P2P Device:它是P2P架构中角色的实体,读者可把它当做一个Wi-Fi设备。* P2P Group Owner:Group Owner(简称GO)是一种角色,其作用类似于Infrastructure BSS中的AP。* P2P Client:另外一种角色,其作用类似于Infrastructure BSS中的...

thinkphp-模板文件的定位fetch_weixin_33709219的博客-程序员宅基地

1.无参数调用return$view->fetch();2.指定操作调用return$view->fetch("index");3.带控制器return$view->fetch("demo/index");4.跨模块调用return$view->fetch("[email protected]/index");5.全路径模板调用return$view-&g...

linux 创建新脚本,Linux中如何利用shell脚本自动创建多个新用户_木易movie的博客-程序员宅基地

今天小编要跟大家分享的文章是关于Linux中如何利用shell脚本自动创建多个新用户。此脚本是用来批量创建用户并设置用户密码,在企业用非常实用。希望对于脚本一:#!/bin/bashfor name in $( seq 1 100 )douseradd "user$name"if [ $? -eq 0 ];thenecho -e "n创建 "user$name" 成功!"fidone添加100用户...

Java类型转换工具类(十六进制—bytes互转、十进制—十六进制互转,String—Double互转)_诚的博客-程序员宅基地

/** * 数据类型转换工具类 * @author cyf * */public class NumConvertUtil{ /** * bytes 转16进制字符串 * @param bArray * @return */ public static final String bytesToHexString(byte[] bArray) { StringBuffer sb = new String...

ECSHOP goods表字段分析_nadeal在写博客-程序员宅基地_goods表中的所有字段

转自 https://blog.csdn.net/daojun6/article/details/45967553因为今天要做淘宝数据与ecshop数据对接,用ecshop 内部的批量上传老是出问题,索性自己做一个数据上传功能算了,就对ecshop 的goods表字段 做了简单分析 如下:goods_id 产品idcat_id 分类idgoo...

Chrome之于网页开发的优异性能_drivedreams的专栏-程序员宅基地

作为一个web开发的初学的我,第一次使用Chrome浏览器就被他出色的性能所吸引!       在使用chrome之前我一直都是在使用世界之窗、遨游、360,等浏览器。这些浏览器的特点在于功能强大,操作比较简单。对于对普通的电脑用户在合适不过了!但当开发时这些强大而简单的操作就显的多余了。在开发时我们往往更注重我们的程序加载的速度,兼容性,以及便捷、清晰的开发人员工具。而chrome正好兼备了

推荐文章

热门文章

相关标签