盒子模型2+浮动

盒子居中和文字居中

1.设置盒子中存储的文字/图片水平居中:text-align:center;

2.让盒子自己水平居中:margin:0 auto;

清空默认边距

1.为什么要清空默认边距(外边距和内边距)?

在企业开发中为了更好的控制盒子的宽高和计算盒子的宽高等等,所以在企业开发中,编写代码之前第一件事就是清空默认的边距。

2.如何清空?

格式:* { margin:0;padding:0;}

3.注意点:通配符选择器会找到(遍历)当前界面中所有的标签,所以性能不好。企业开发中可以从这个网址中拷贝:http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css

行高和字号

1.注意点:行高和盒子高度不是同一个概念。

2.规律:

2.1)文字在行高中默认是垂直居中的。

2.2)在企业开发中我们经常将盒子的高度和行高设置为一样,那么这样就可以保证一行文字在盒子的高度中是垂直居中 的。简而言之就是:要想一行文字在盒子中垂直居中,那么只需要设置这行文字的行高等于盒子的高即可。

2.3)在企业开发中如果一个盒子中有多行文字,那么我们就不能使用设置行高等于盒子高来实现让文字垂直居中,只能通过设置padding来让文字居中。

还原字体和字号

注意点:

1.在企业开发中,如果一个盒子中存储的是文字,那么一般情况下我们会以盒子左边的内边距为基准,不会以右边的内边距为基准,因为这个右边的内边距有误差。

2.右边内边距的误从何而来?因为右边如果放不下一个文字,那么文字就会换行显示,所以文字和内边距之间的距离就会有误差。

3.顶部的内边距并不是边框到文字顶部的距离,而是边框到行高顶部的距离。

例题

什么是网页的布局方式?

网页的布局方式其实就是指浏览器是如何对网页中的元素进行排版的。

1.标准流(文档流/普通流)排版方式

1.1)浏览器默认的排版方式就是标准流的排版方式。

1.2)在CSS中将元素分为三类,分别是块级元素/行内元素/行内块元素。

1.3)在标准流中有两种排版方式,一种是垂直排版(如果是块级元素,就是垂直排版),一种是水平排版(如果是行内元素/行内块元素,就是水平排版)。

2.浮动流排版方式

2.1)浮动流是一种"半脱离标准流"的排版方式。

2.2)浮动流只有一种排版方式, 就是水平排版。它只能设置某个元素左对齐或者右对齐。

2.3)注意点:

2.3.1)浮动流中没有居中对齐, 也就是没有center这个取值。

2.3.2)在浮动流中是不可以使用margin: 0 auto; 。

2.4)特点:

2.4.1)在浮动流中是不区分块级元素/行内元素/行内块级元素的,无论是块级元素/行内元素/行内块级元素都可以水平排版。

2.4.2)在浮动流中无论是块级元素/行内元素/行内块级元素都可以设置宽高。

2.4.3)综上所述, 浮动流中的元素和标准流中的行内块级元素很像。

浮动元素脱标

1.什么是浮动元素的脱标?

脱标: 脱离标准流。

当某一个元素浮动之后, 那么这个元素看上去就像被从标准流中删除了一样, 这个就是浮动元素的脱标。

2.浮动元素脱标之后会有什么影响?

如果前面一个元素浮动了, 而后面一个元素没有浮动 , 那么这个时候前面一个元素就会盖住后面一个元素。

浮动元素排版规则

1.浮动元素排序规则

1.1)相同方向上的浮动元素, 先浮动的元素会显示在前面, 后浮动的元素会显示在后面。

1.2)不同方向上的浮动元素, 左浮动会找左浮动, 右浮动会找右浮动。

1.3)浮动元素浮动之后的位置, 由浮动元素浮动之前在标准流中的位置来确定。

备注:1左浮 2不浮 3左浮 4不浮

备注:1左浮 2不浮 3左浮 4左浮

浮动元素贴靠现象

1.什么是浮动元素贴靠现象?

1)如果父元素的宽度能够显示所有浮动元素, 那么浮动的元素会并排显示。

2)如果父元素的宽度不能显示所有浮动元素, 那么会从最后一个元素开始往前贴靠。

3)如果贴靠了前面所有浮动元素之后都不能显示, 最终会贴靠到父元素的左边或者右边。

浮动元素字围现象

1.什么是浮动元素字围现象?

浮动元素不会挡住没有浮动元素中的文字, 没有浮动的文字会自动给浮动的元素让位置,这个就是浮动元素字围现。

来自为知笔记(Wiz)

原文地址:https://www.cnblogs.com/Shuangyi/p/11229068.html

时间: 2024-08-02 05:49:42

盒子模型2+浮动的相关文章

CSS(三)解析盒子模型的浮动

上篇博客遗留了浮动和定位两个问题,只是对他们进行了简单的描述,今天仔细透透他们的底细,此篇为浮动篇. 浮动在这个CSS排版流行的年代发挥着越来越重要的作用,如同aline对定位网页元素的重要性一样,但它比aline更加功能强大. float主要功能是帮助对象在网页中对齐的,通过不同的命令使对象左右浮动,直到遇到border.padding.margin或其他对象边缘为止.别看这简单的浮动,却可以为我们的排版设计出各种靓丽的风格,下面介绍几种. 我把它们归为了以下两大类:普通浮动和嵌套浮动. 普通

css的核心内容 标准流、盒子模型、浮动、定位等分析

1.块级元素:如:<div></div>2.行内元素:如:<span></span>从效果中看块级元素与行内元素的区别: 通过CSS的设置把行内元素转换成块级元素: 标准流:就是标签的排列方式.<div class="style2">我的未来不是梦</div><span id="st" class="style1">栏目一</span><span

Java学习总结(二十四)——前端:CSS样式设计(CSS引入,选择器,盒子模型,浮动元素)

一.CSS引入方式1.CSS简介:(1)CSS(Cascading style Sheets):层叠样式表.用来给html网页设置样式;(2)当多个选择器对同一个元素进行样式设计时,则该元素的样式为多个选择器叠加的效果(当有冲突时,按照优先级设置);2.引入方式:(1)方式一:行内样式(在html元素的style属性上设置样式)(2)方式二:页面内嵌样式(在head标签内部嵌入样式)(3)方式三:引入外部样式文件例1(演示CSS三种引入方式):Html代码: <!DOCTYPE html> &

IT兄弟连 HTML5教程 使用盒子模型的浮动布局

虽然使用绝对定位可以实现页面布局,但由于调整某个盒子模型时其他盒子模型的位置并不会跟着改变,所以并不是布局的首选方式.而使用浮动的盒子模型可以向左或向右移动,直到它的外边缘碰到包含它的盒子模型边框或另一个浮动盒子模型的边框为止.并且由于浮动的盒子模型不在文档的普通流中,所以文档的普通流中的盒子模型表现得就像浮动的盒子模型不存在一样. 1  设置浮动 在CSS中,我们通过float属性实现盒子区块框向左或向右浮动.其实任何元素都可以浮动,而浮动元素会生成一个块级框,而不论它本身是何种元素.但浮动的

关于盒模型的 盒子模型 、 浮动 、 定位以及高级选择器的使用

盒模型的基本组成包括:外边距(margin)内边距(padding) 边框(border)元素(element,content) 当上下相邻的两个块元素相遇时,如果上面的元素有下外边距margin-bottom,下面的元素有上外边距margin-top,则他们之间的垂直间距不是margin-bottom与margin-top之和,而是两者中的较大者.这种现象被称为相邻块元素垂直外边距的合并( 对于两个嵌套关系的块元素,如果父元素没有上内边距及边框,则父元素的上外边距会与子元素的上外边距发生合并,

CSS初识- 选择器 &amp;背景&amp; 浮动&amp; 盒子模型

CSS初识 CSS:cascading style sheets,css样式表或层叠样式表(级联样式表),主要用于设置HTML页面中的文本内容(字体.大小.对齐方式等).图片的外形(宽高.边框样式.边距等)以及版面的布局等外观显示样式. CSS以HTML为基础,提供丰富的功能,如字体.颜色.背景的控制及整体排版等,而且还针对不同的浏览器设置不同的样式. 引入CSS样式(书写位置) 内部样式表 内嵌式是将CSS代码集中写在HTML文档的head头部标签中,并用style标签定义,语法就是在 行内式

一定要弄懂的盒子模型

这一篇其实老早之前就该写了,但是在敲牛腩的时候,只是跟着老师敲,没有系统的学习CSS这部分知识,从图书馆借了一本书,最近想要系统的学习这部分的知识,所以今天花了小一天的时间做了一个网页,重新学习了一下盒子模型和浮动的知识.今天就聊聊盒子模型这部分知识吧! 定义 在CSS处理页面的时候,它认为每个元素都是包含在一个不可见的盒子里,盒子模型由内容区域.内容区域周围空间(内边距padding).内边距的外边缘(边框,border)和边框外面将元素与相邻元素隔开的不可见区域(margin)构成.我们将盒

盒子模型、网页自动居中、float浮动与清除、横向两列布局

1.CSS包含:标准文档流,浮动,绝对定位 标准文档流的特点:从上到下,从左到右,输出文档内容 盒子模型:块级元素(div ui li dl dt p)与行级元素(span strong img input) 盒子模型:边框(border)外边框(margin)内边框(padding)内容(content) 盒子3D模型:border. content+padding .background-img.background-color.margin <html> <head> <

前端重要盒子模型 浮动 定位 块级元素、行元素 7.9

1.块级元素的特点: (1)块级元素里面的内容,或者背景图片,默认显示在块的左上角 (2)块级元素,默认情况下,单独占满一行. 常用的块级元素:div.p.h1-h6.hr.ul li.ol li.table.body... 2.浮动:float 作用:通过漂浮,让块级元素实现并排 float:left 或 right 注意:如果div左边或者右边的块存在浮动,会对此div产生影响,此时需要清除左右方的浮动 清除浮动:clear:left(清除左边div的浮动)或right(清除右边div的浮动