CSS布局(二) 盒子模型属性

盒子模型的属性

宽高width/height

  在CSS中,可以对任何块级元素设置显式高度。

  如果指定高度大于显示内容所需高度,多余的高度会产生一个视觉效果,就好像有额外的内边距一样;

  如果指定高度小于显示内容所需高度,取决于overflow属性,需要滚动条需要设置为overflow:auto

auto

  宽高和margin可以设置auto。对于块级元素来说,宽度设置为auto,则会尽可能的宽。详细来说,元素宽度=包含块宽度—元素水平外边距-元素水平边距宽度-元素水平内边距;

  高度设置为auto,则会尽可能的窄。详细来说,元素高度=恰好足以包含其内联内容的高度

  [注意]如果没有显式声明包含块的height,则元素的百分数高度会重置为auto

 

 【最大最小宽高】

min-width | min-height

  初始值: 0

  应用于: 块级元素和替换元素

  百分数: 相对于包含块的宽度(高度)

max-width | max-heightt

  初始值: none

  应用于: 块级元素和替换元素

  百分数: 相对于包含块的宽度(高度)

[注意]当最小宽度(高度)大于最大宽度(高度)时,以最小宽高的值为准

 

内边距padding

  相比于盒模型的其他属性(如在定位中经常使用负值的margin),padding显得中规中矩了很多,没有什么兼容性,也没有一些特殊的问题

  对于行内元素,左内边距应用到元素的开始处,右内边距应用到元素的结尾处,垂直内边距不影响行高,但会影响自身尺寸,加背景颜色可以看出

  [注意]内边距不能是负值

padding

  初始值: 未定义

  百分数: 相对于包含块的width

【50%】

  块级元素通过padding:50%可以实现正方形的效果,因为水平和垂直padding的百分比值都是相对于包含块的宽度决定的,常常用于移动端头图

 

 外边距margin

设置外边距margin会在元素外创建额外的空白,空白通常指不能放其他元素的区域,而且在这个区域中可以看到父元素的背景

margin

  初始值: 未定义

  应用于: 所有元素

  百分数: 相对于包含块的width

[注意]对于普通元素来说,包含块就是块级父级元素,对于定位元素来说,包含块是定位父级。所以,普通元素的margin百分比相对于块级父级元素的width,定位元素的margin百分比相对于定位父级的width

 

margin可以设置为负值,margin和宽高支持auto,以及margin具有非常奇怪的重叠特性。

介绍外边距margin的几个重点部分,包括重叠、auto和无效情况

1.重叠

【前提】

  margin重叠又叫margin合并,发生这种情况有两个前提

  1、只发生在block元素上(不包括float、absolute、inline-block元素)

  2、只发生在垂直方向上(不考虑writing-mode)

【分类】

  margin重叠的情况

1、相邻的兄弟元素

<style>
p{line-height: 2em; margin: 2px 0; background-color: lightblue; display:inline-block; width: 100%; } </style> <p>兄弟一</p> <p>兄弟二</p>


 2、父级元素和第一个或最后一个子元素,父子级的margin重叠又叫margin传递

<style>
.box{background-color: pink; height:30px; } .inner{ margin-top: 1em; background-color: lightblue; } </style> <div class="box"> <div class="inner">子级</div> </div> 

 在网页布局中,因为margin重叠的原因,我们常常把margin作为一个“问题样式”而尽量少地使用它。但实际上,它是在很大的作用的,

所以,我们要善用重叠,可以在列表项中同时使用margin-top和margin-bottom。这样,使页面结构更具有健壮性,最后一个元素移除或位置调换,都不会破坏原生的布局

2.auto

  只有width/height和margin可以设置auto。

【为什么margin:auto无法实现垂直居中】

  水平方向可以居中是因为块级元素的宽度默认是撑满父级元素的,如果给宽度设置一个固定值,而左右margin设置为auto,则可以平分剩余空间

  垂直方向不可以居中是因为块级元素的高度默认是内容高度,与父级元素的高度并没有直接的关系,而上下margin设置为auto,则被重置为0

margin: 0 auto;

【为什么图片使用margin:auto不能水平居中】

  图片无法水平居中,类似于块级元素无法垂直居中。因为图片的宽度width默认是自身宽度,与父元素的宽度没有直接关系。左右margin设置为auto,会被重置为0

  所以,图片要水平居中,需要设置为display:block元素

3.无效情形

  1、行内元素垂直margin无效

  因为行内元素垂直布局主要是通过行高line-height和垂直对齐vertical-align来影响的,垂直margin并不会影响它们,所以不会影响垂直布局。而在显示方式,margin区域不会显示元素背景,所以也不会影响自身元素的显示,所以行内元素垂直margin无效。[注意]不包括inline-block

  2、某些表格类元素margin无效

<thead>``<tbody>``<tfoot>``<tr>``<col>``<colgroup>``<td>``<th>  不可设置margin。

   3、BFC造成的margin看似无效

  左侧元素使用浮动,右侧元素使用overflow-hidden实现两栏自适应的布局时,右侧元素的margin-left值只有足够大,才能看到效果。这是因为margin-left是相对于父元素左侧,而不是图片右侧

边框border

  元素外边距内就是元素的边框border,边框由粗细、样式和颜色三部分组成,且先后顺序无关

基础样式

复制代码
 border: border-width border-color border-style  border: 1px red 
solid
;
复制代码

边框样式

  如果一个边框没有样式,边框将根本不会存在

  关于虚线dashed,在chrome/firefox下,虚线宽高比是3/1;而在IE下,虚线宽高比为2/1。所以在IE下虚线显得比较密

  关于点线dotted,在chrome下,点线是方点;而在IE/firefox下,点线是圆点

border-style:none(默认)
border-style:hidden/dotted/dashed/solid/double/groove/ridge/inset/outset(共9种)

边框单边

  border-top/border-right/border-bottom/border-left

  圆角边框

border-radius: none(默认)
border-radius: 6px
border-radius: 10px 20px 30px 40px   四值顺序是左上、右上、右下、左下
border-top-left-radius: 10px 20px;   左上

 

 【特殊图形】

圆形

  元素的宽高相同,且圆角半径为宽高的一半

div{width: 100px;height: 100px;border-radius: 50%;
}

半圆

  元素宽高不同,且圆角半径与宽高要配合

div{width: 100px;height: 50px;border-radius: 50px 50px 0 0;
}

扇形

  元素宽高及一个圆角半径相同

div{width: 50px;height: 50px;border-radius: 50px 0 0 0;
}  

盒子阴影

  盒子阴影box-shadow可以为元素设置阴影

box-shadow: none(默认)
box-shadow: (h-shadow v-shadow blur spread color inset) ;h-shadow: 水平阴影位置(必须)
v-shadow: 垂直阴影位置(必须)
blur:     模糊距离(可选)
spread:   阴影尺寸(可选)
color:    阴影颜色,默认和文本颜色一致(可选)
inset:    内部阴影(可选)    
box-shadow:10px 10px red,20px 20px blue;

  使用盒子阴影box-shadow时,有如下几点注意事项:

  1、可以使用多重阴影,但使用过多会造成性能差

  2、边框在内阴影之上,内阴影在背景图片之上,背景图片在背景色之上,背景色在外阴影之上

  3、内阴影对

<img>
元素没有任何效果

  4、最先写的阴影在最顶层

  5、该属性与border-radius一脉相承,若通过border-radius设置为圆角,则box-shadow的最终呈现也将是圆角

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/369726.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Extjs 下拉框

刚刚熟练了easyui控件的使用&#xff0c;又開始了如今的这个项目。这个项目是个半成品。前端使用的是Extjs控件&#xff0c;jsp中没有代码。就引用了非常多的js。。。于是乎有种不知所措了呀。。。 说实话特别的不想去看那些代码&#xff0c;第一是不熟悉&#xff0c;第二是太乱…

Java中的贷款模式(又名贷方承租人模式)

这篇文章是关于在Java中实现贷款模式的。 用例 在保存资源的代码与访问资源的代码之间实现分离&#xff0c;从而使访问代码无需管理资源。 当我们编写用于读取/写入文件或查询SQL / NOSQL数据库的代码时&#xff0c;上述用例适用。 在AOP的帮助下&#xff0c;肯定有API处理了此…

python亲密度_859. 亲密字符串(Python)

题目难度&#xff1a;★★☆☆☆类型&#xff1a;字符串给定两个由小写字母构成的字符串 A 和 B &#xff0c;只要我们可以通过交换 A 中的两个字母得到与 B 相等的结果&#xff0c;就返回true &#xff1b;否则返回 false 。提示0 < A.length < 200000 < B.length &l…

开发电子商城1

1 从阿里云的镜像 下载centos 6.8 64位 https://mirrors.aliyun.com/centos/6.8/isos/x86_64/CentOS-6.8-x86_64-bin-DVD1.iso 2&#xff1a;用vm安装 选定basic service版本 3&#xff1a;将Centos的yum源更换为国内的阿里云源 http://www.centoscn.com/image-text/config/20…

静态工厂方法与传统构造方法

之前&#xff0c;我已经讨论过一些关于Builder模式的信息 &#xff0c; Builder Pattern是一种有用的模式&#xff0c;用于实例化具有多个&#xff08;可能是可选的&#xff09;属性的类&#xff0c;这些属性可以使读取&#xff0c;编写和维护客户端代码更加容易&#xff0c;还…

python输入代码界面通常_vscode写python时的代码错误提醒和自动格式化的方法

python的代码错误检查通常用pep8、pylint和flake8&#xff0c;自动格式化代码通常用autopep8、yapf、black。这些工具均可以利用pip进行安装&#xff0c;这里介绍传统的利用pip.exe安装和在VScode中安装两种方式。【温馨提醒】要使用flake8或要想flake8等工具起作用&#xff0c…

HTML/CSS 知识点

本文是从简书复制的, markdown语法可能有些出入, 想看"正版"和更多内容请关注 简书: 小贤笔记 整个前端开发的工作流程 产品经理提出项目需求UI出设计稿前端人员负责开发静态页面(跟前端同步的后台人员在准备数据)前后台的交互测试产品上线(后期项目维护) 互联网原…

枚举枚举和修改“最终静态”字段的方法

在本新闻通讯中&#xff0c;该新闻通讯最初发表在Java专家的新闻通讯第161期中&#xff0c;我们研究了如何使用sun.reflect包中的反射类在Sun JDK中创建枚举实例。 显然&#xff0c;这仅适用于Sun的JDK。 如果需要在另一个JVM上执行此操作&#xff0c;则您可以自己完成。 这一…

java编译找不到符号_关于久违的Javac,编译出现“找不到符号”

参考文档&#xff1a;http://blog.csdn.net/qq369201191/article/details/49946609工作以来习惯了maven编译&#xff0c;已经忘记了javac这个东东&#xff0c;以至于遇到javac问题时困惑了&#xff0c;下面总结一下&#xff0c;以便后者参考。一、使用javac进行项目java文件编译…

CSS--居中方式总结

一、水平居中方法 1.行内元素、字体的水平居中 1.对于行内元素&#xff08;display值为inline或inline-block都可以&#xff09;或者字体&#xff1a;父元素添加css规则&#xff1a;text-align&#xff1a;center; <style> p{/*关键*/text-align:center; }ul{/*关键*/…

009-MailUtils工具类模板

版本一&#xff1a;JavaMail的一个工具类 package ${enclosing_package};import java.security.GeneralSecurityException; import java.util.Properties;import javax.mail.Authenticator; import javax.mail.Message; import javax.mail.MessagingException; import javax.ma…

HTML5 Video标签

1.代码格式 <video width"320" height"240" controls><source src"movie.mp4" type"video/mp4"><source src"movie.ogg" type"video/ogg">您的浏览器不支持Video标签。</video>视频格式及…

某些小时后MySql连接自动掉线

MySql配置为删除任何闲置超过8小时的连接。 这意味着什么&#xff1f; 在8个小时的间隔后返回到已部署的应用程序之后&#xff08;如果未更改默认SQL参数&#xff09;&#xff0c;将会遇到异常情况。 如何解决这个问题&#xff1f; 增加wait_time参数-不是一个好主意&#xff…

AutoMapper的使用

本来是想洋洋洒洒写点儿关于这个神奇的具体使用方法&#xff0c;但是发现园子里已经有了&#xff0c;URL奉上&#xff1a;http://www.cnblogs.com/CreateMyself/p/7635429.html&#xff0c;直接打开撸就行。转载于:https://www.cnblogs.com/pangjianxin/p/8367589.html

shopxx 阿里云OSS设置

shopxx 使用文档没有啊&#xff0c;只能自己看了 数据中心 字段其实是 EndPoint字段 URL前缀 是 图片服务器的主机地址。这个在阿里云回传的时候是不带的。 对应 阿里OSS 外网域名 转载于:https://www.cnblogs.com/nanahome/p/7346641.html

bio java 例子_JAVA BIO 服务器与客户端实现示例

代码只兼容JAVA 7及以上版本。服务器端代码&#xff1a;package com.stevex.app.bio;import java.io.BufferedReader;import java.io.IOException;import java.io.InputStreamReader;import java.io.PrintWriter;import java.net.ServerSocket;import java.net.Socket;import j…

我的HTML总结之常用基础便签

HTML&#xff1a;是Hyper Text Markup Language&#xff08;超级文本标记语言&#xff09;的缩写&#xff0c;HTML不是一种程序&#xff0c;只是一种控制网页中数据显示的标识语言。 HTML由一组标签组成。 HTML的基本结构 <html> <head> <title>第一个HTML示…

您是否应该信任JVM中的默认设置?

如今&#xff0c;JVM被认为是智能的。 预期不会进行太多配置–只需设置要在启动脚本中使用的最大堆&#xff0c;您就可以进行了。 所有其他默认设置都很好。 大概我们当中有些人误以为。 实际上&#xff0c;在运行时期间发生了很多事情&#xff0c;无法自动调整性能&#xff0c…

【翻译】A Next-Generation Smart Contract and Decentralized Application Platform

原文链接&#xff1a;https://github.com/ethereum/wiki/wiki/White-Paper 当中本聪在2009年1月启动比特币区块链时&#xff0c;他同时向世界引入了两种未经测试的革命性的新概念。第一种就是比特币&#xff08;bitcoin&#xff09;&#xff0c;一种去中心化的点对点的网上货币…

SAS Fuctions

1. monotonic(), 单调递增函数。返回一列变量的序列等&#xff0c;类似于_N_ 。 2. index v indexw: INDEX Function Searches a character expression for a string of characters, and returns the position of the string’s first character for the first occurrence of t…