CSS布局

每次谈到网页设计，最让我头疼的就是调页面的布局，页面的长宽高了；现在系统的学习和尝试把每个代码都完整的type一下，增加对页面布局的理解

参考 http://houdunren.gitee.io/note/css/5%20%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B.html#%E7%9B%92%E5%AD%90%E6%A8%A1%E5%9E%8B

盒子模型

<style lang="">
main{
  width: 500px;
  height: 500px;
  margin:20px auto;
  border: solid 1px red;
}
h1{
  width: 300px;
  height: 300px;
  border: solid 1px green;
  text-align: center;
  margin: 10px auto;
}
</style>
<body>
<main>
  <h1>盒子模型</h1>
</main>
</body>

margin:20px auto在元素指定宽高时，内部子元素会水平居中
margin: 50px 80px 100px 150px;此时按照上、右、下、左定义外边距
margin:10px 10px按照上下、左右定义

当两个相邻的元素的外边距会合并，例如再往下接一个h1标签时，两个相邻h1之间的外边距为10px；而不是10px+10px；

box-size

//这种模式下，padding与边框也算进了width和height属性里
box-sizing:border-box;
//width属性不包括padding
box-sizing:content-box;

定义border-style
border-style: outset solid dotted double;可以分别定义样式、宽度、和颜色
- style
- color
- width
类型
描述
none
定义无边框。
dotted
定义点状边框。在大多数浏览器中呈现为实线。
dashed
定义虚线。在大多数浏览器中呈现为实线。
solid
定义实线。
double
定义双线。双线的宽度等于 border-width 的值。
groove
定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge
定义 3D 垄状边框。其效果取决于 border-color 的值。
inset
定义 3D inset 边框。其效果取决于 border-color 的值。
outset
定义 3D outset 边框。其效果取决于 border-color 的值。
圆角边框 border-radius
border-top-left-radius: 10%;只有左上角为弧形
border-radius: 50%;绘制圆

显示与隐藏display

选项

说明

none

隐藏元素

block

显示为块元素

inline

显示为行元素，不能设置宽/高

inline-block

行级块元素，允许设置宽/高f

溢出控制overflow

选项

说明

hidden

溢出内容隐藏

scroll

显示滚动条（有些浏览器会一直显示，有些在滚动时显示）

auto

根据内容自动处理滚动条

元素尺寸设定

选项

说明

width

宽度

height

高度

min-width

最小宽度

min-height

最小高度

max-width

最大宽度

max-height

最大高度

fill-available

撑满可用的空间

fit-content

根据内容适应尺寸

min-content

将容器尺寸按最小元素宽度设置

max-content

容器尺寸按子元素最大宽度设置。

Previouscss Next02定位

Last updated 5 years ago

盒子模型

<style lang="">
main{
  width: 500px;
  height: 500px;
  margin:20px auto;
  border: solid 1px red;
}
h1{
  width: 300px;
  height: 300px;
  border: solid 1px green;
  text-align: center;
  margin: 10px auto;
}
</style>
<body>
<main>
  <h1>盒子模型</h1>
</main>
</body>

margin:20px auto在元素指定宽高时，内部子元素会水平居中

margin: 50px 80px 100px 150px;此时按照上、右、下、左定义外边距

margin:10px 10px按照上下、左右定义

当两个相邻的元素的外边距会合并，例如再往下接一个h1标签时，两个相邻h1之间的外边距为10px；而不是10px+10px；

box-size

//这种模式下，padding与边框也算进了width和height属性里
box-sizing:border-box;
//width属性不包括padding
box-sizing:content-box;

定义border-style

border-style: outset solid dotted double;可以分别定义样式、宽度、和颜色

style
color
width

类型

描述

none

定义无边框。

dotted

定义点状边框。在大多数浏览器中呈现为实线。

dashed

定义虚线。在大多数浏览器中呈现为实线。

solid

定义实线。

double

定义双线。双线的宽度等于 border-width 的值。

groove

定义 3D 凹槽边框。其效果取决于 border-color 的值。

ridge

定义 3D 垄状边框。其效果取决于 border-color 的值。

inset

定义 3D inset 边框。其效果取决于 border-color 的值。

outset

定义 3D outset 边框。其效果取决于 border-color 的值。

圆角边框 border-radius

border-top-left-radius: 10%;只有左上角为弧形

border-radius: 50%;绘制圆

显示与隐藏display

选项

说明

none

隐藏元素

block

显示为块元素

inline

显示为行元素，不能设置宽/高

inline-block

行级块元素，允许设置宽/高f

溢出控制overflow

选项

说明

hidden

溢出内容隐藏

scroll

显示滚动条（有些浏览器会一直显示，有些在滚动时显示）

auto

根据内容自动处理滚动条

元素尺寸设定

选项

说明

width

宽度

height

高度

min-width

最小宽度

min-height

最小高度

max-width

最大宽度

max-height

最大高度

fill-available

撑满可用的空间

fit-content

根据内容适应尺寸

min-content

将容器尺寸按最小元素宽度设置

max-content

容器尺寸按子元素最大宽度设置。