首页 > 其他分享 >CSS3第三天(盒子模型+浮动)

CSS3第三天(盒子模型+浮动)

时间:2024-08-19 13:04:36浏览次数:11  
标签:CSS3 浮动 行内 盒子 块级 clearfix 元素 第三天

盒子模型

1.内边距padding

指定了高宽,再指定内边距,则会撑开盒子。

盒子未指定高宽(继承算未指定),则不会撑开盒子。

2.外边距margin

用于控制盒子之间的距离。同padding的简写方式。

margin-left左外边距 right top bottom

块级盒子水平居中,需满足两个条件:①盒子必须指定了宽度 ②盒子左右的外边距都设置auto.

EG------------->  width: 298px  margin: 100px auto;

z注:以上是让块级元素水平居中,行内或行内块元素水平居中给其父元素添加text-align:center即可。

外边距合并:对于嵌套关系的块元素,父元素有上外边距的同时子元素也有上外边距,此时父元素会塌陷(增大)较大的外边距值。

解决方案:

①可以为父元素定义上边框。border:1px solid red/transparent

②可以为父元素定义上内边距。padding:1px

③可以为父元素添加overflow:hidden。

还有其他方法,比如浮动、固定,绝对定位的盒子不会有塌陷问题。

 

清除内外边距

*{

padding:0;//清除内边距

margin:0;//清除外边距

}

注:行内元素为了照顾兼容性,尽量只设置左右内外边距,不要设置上下内外边距。但是转化为块级和行块元素就可以了。

-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

 

PS的使用

 

border-radius:切面圆的半径值;半径越大,圆角越大。

 

盒子阴影(重点)

box-shadow:h-shadow v-shadow blur spread color inset;

h-shadow和v-shadow是必须写的。

默认的是外阴影(outset),但是不可写这个单词,否则导致阴影失效。

盒子阴影不占空间,不影响其他盒子排列。

文字阴影 text-shadow

 

 

浮动最典型的应用:可以放多个块级元素一行内排列显示。

网页布局第一准则:多个块级元素 纵向排列找标准流,多个块级元素 横向排列找浮动

float:属性值;  创建浮动框  将其移动到一边,直到左/右边缘触及包含块或另一个浮动框的边缘 eg.如果都设置向左浮动,则从左贴着呈现。

none(默认) left(元素向左浮动) right

   

如果行内元素有了浮动,则不需要转块、行内块元素就可以直接给高宽度。

浮动让行内元素、块级元素,都变成了 行内块 元素拥有的特性,宽高可控,且多个浮动特性元素,都会在一行上(不管你原先是什么元素)。未指定宽高的,由文字内容决定。

 

浮动布局注意点:

1.先用标准流的父元素排列上下位置,之后内部子元素采用浮动排列左右位置。

2.元素横着排的,一个元素浮动,理论上兄弟也浮动,如果未浮动,说明哪个少加float了。

浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流。---------------自己的理解:如果加了浮动,那么这个元素就相当于漂起来了并且定在这个位置的上面的漂,后面的标准流就随着它的变化而变化了。

1

2

3

设置:1浮动2不浮动3浮动,效果:1在2的上面,3自己一行

1不浮动2浮动3不符动,效果:1自己一行,2在3上面。

总结,浮动盒子,会浮动在后面紧跟的标准流上。(原因:浮动盒子不占有位置。。)

 

清除浮动:父级盒子在很多情况下,不能给写死的高度,但子盒子浮动不占有位置,最后父级盒子高度就为0,影响下面的标准流盒子(他会处于浮动盒子的下面)。

①额外标签法:

语法: 选择器{clear:属性值}   -----left(清除左侧漂动的影响)--right --both  漂动元素最后一个添加块级标签调用选择器    清除浮动的策略是:闭合浮动 缺点:加了代码

②添加overflow:hidden、auto、scroll 缺点 无法显示溢出部分

③after伪元素

④before和after双伪元素清除浮动

.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
        content: "";
        display: block;
        height: 0;
        clear:both;
        visibility: hidden;
    }
    .clearfix{
        *zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行,其他浏览器不执行*/
    }

块级元素,调用一下这个clearfix类选择器
---------------------------------------------------------

.clearfix:after,.clearfix:before{
content: "";
display: table;
}
.clearfix:after{
clear: both;
}
.clearfix{
*zoom: 1;
}

<div class="fahter clearfix">
<div class="big">big</div>
<div class="small">small</div>
</div>
<div class="footer"></div>



标签:CSS3,浮动,行内,盒子,块级,clearfix,元素,第三天
From: https://www.cnblogs.com/fengok/p/18347457

相关文章

  • 小猪佩奇学英语——第三天
    例句Peppaiswaitingforherbestfriend,SuzySheep.waitfor:等某人或某物waitto:等着去做某事I'mwaitingforyou.Waitforme.I'mwaittogetin.我等着进去Ican'twaittoseeyou.我迫不及待地想见你他最好的朋友中的他要用所有格,His,HerHerbestf......
  • 自学爬虫第三天,番茄小说(文字加密)
    提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档目录                        文章目录前言一、什么是文字加密?二、步骤1.引入库2.构建请求头3.构建url列表以及章节目录列表​编辑3.先对第一章进行分析,看看内容是否正确 4.......
  • 如何自建PT刷流盒子
    如何自建PT刷流盒子选择机器为了刷流我们最好选择大带宽、大容量的服务器,在这里我们简称大盘鸡在这里为了方便演示我就拿DigitalOcean的一台服务器进行搭建,如果你要正式刷流了还是买个硬盘容量大点的操作系统可以用Centos或者Debian系的都行,这个不影响填写密码,请务必牢记,......
  • html5+CSS3 Canvas动画分享
    1.赛朋博客赛车动画 源码分享:<!DOCTYPEhtml><htmllang="en"><head>  <metacharset="UTF-8">  <title>赛车</title>  <style>    *{      margin:0;      padding:0;      bo......
  • 网络安全实训第三天
    1文件上传漏洞准备一句话文件wjr.php.png,进入到更换头像的界面,使用BP拦截选择文件的请求拦截到请求后将wjr.phh.png修改为wjr.php,进行转发由上图可以查看到上传目录为网站目录下的upload/avator,查看是否上传成功使用时间戳在线工具获取到上传文件的名称打开......
  • HBase学习的第三天--hbase的架构和基础命令2
    5.4 namespacehbase中没有数据库的概念,可以使用namespace来达到数据库分类别管理表的作用5.4.1 列举命名空间list_namespace5.4.2 获取命名空间描述describe_namespacedescribe_namespace'default'5.4.3 查看命名空间下的所有表list_namespace_tableslist_names......
  • 15.画盒子,文字修饰属性,行高
    一.画盒子 顾名思义就是在浏览器插入一个四方形,宽高随意,那这个要如何操作呢,记得之前学过的无语义标签不,我们可以用<div>标签来画盒子,具体如何操作:<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width......
  • CCNA Security第三天.1
    ssh其实就是加密的telnet。clissh配置步骤tep1:配置主机名hostnamesshrouterstep2:配置域名ipdomiannameyeslab.comstep3:产生rsa密钥对(建议1024位长度)cryptokeygeneratersamodulus1024step4:创建本地用户名和密码(级别可选)usernameadminprivilege15pa......
  • CCNA Security第三天.2
    其他交换机安全特性1.span(交换机端口分析)monitorsession1sourceinterfacegi0/2(把某个接口流量引导某个接口)monitorsession1detinationinterfacegi0/3(抓包的接口)2.vacl1.能够对vlan内核vlan间的流量进行控制2.能够对ip和none-ip的流量进行控制3.vacl先于racl进......
  • 7.第二天和第三天(第三部分):Describing Signature Engines.2
    状态化signature监控不同类型的状态化切换1.ciscologin2.lpr3.smtp需要试验验证:start仅仅表示一个开始ciscodevice:仅仅只是匹配初始化时候弹出的提示符号,例如:useraccessvenfication,ciscosystemsconsole.passprompt:仅仅只是匹配一个密码提示符号,例如:password;co......