Niko
html css的一些基础 盒子模型

html css的一些基础 盒子模型


html css 盒子模型 基础 
html实体（转移字符）
比如 浏览器会把多个空格解析为一个空格
  空格
> 大于号
< 小于号
© 版权符号
...
meta标签 写在head标签内
主要用于设置网页中的一些元数据 不是给用户看的
chaset 指定网页的字符集
name 指定的数据的名称
--keywords 表示网页的关键字
--description 用于指定网站的描述 网站的描述会显示在搜索引擎的搜索结果中
--title 会作为搜索结果的超链接上的文字显示

content 指定的数据的内容
<meta charset="UTF-8">
<meta name="keywords" content="Niko,blog,css">

将页面在3秒后重定向到百度
<meta http-equiv="refresh" content="3;url=http://www.baidu.com">
在网页中HTML专门用来负责网页的结构 所以在使用html标签时 应该关注的是标签的语义 而不是它的样式。


标题标签：
h1 ~ h6 一共六级标题 重要性递减
都是块元素
h1在网页中的重要性仅次于title标签 SEO关注 一般情况下一个页面只会有一个h1

hgroup用来为标签分组 可以将一组相关的标题放一起
<hgroup>
	<h1>大标题</h1>
	<h2>小标题</h2>
</hgroup>

p标签表示页面中的一个段落 块元素

em标签用于表示语音语调的一个加重 行内元素
strong表示强调 重要内容 行内元素
...
遇到看文档就行

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

在页面中一般通过块元素对页面进行布局
行内元素主要用来包裹文字
一般会在块元素中放行内元素 不会再行内元素中放块元素
块元素中进本上什么都能放
--p元素中不能放任何块元素

浏览器解析网页时 会自动对网页中不符合规范的内容进行修正
	比如：
	标签写在根元素外部
	p元素内嵌套了块元素
	根元素出现了除head和body以外的子元素
	......

语义化标签：
<body>
	<header></header>
	<main></main>
	<footer></footer>

	<nav></nav>
	<aside></aside>
	<article></article>

	<section></section>
</body>

header 表示网页的头部
main在一个页面只能有一个 表示网页的主体部分
footer 表示网页的底部
header和footer可以表示一个部分的头部和底部 所以可以多个

nav 表示网页中的导航
aside 表示和主主体相关的内容 （侧边栏）
article 表示文章

section表示一个独立的区块 上面的标签都不能表示时使用

这几个都是html5新增的 用的少 seo里用处也不大 本身也没有任何样式
div 块元素
span 行内元素
这两个没有任何语义

a标签的其他用处
<a href="#bottom">去底部</a>

<a id="bottom" href="#">回到顶部</a>

audio video 标签

<audio src="...mp3" controls autoplay loop></audio>

还可以通过source指定文件路径 可以解决一些兼容问题
<audio>
	对不起 您的浏览器不支持播放 请升级浏览器！
	<source src="...mp3">
	<source src="...ogg">
	ie8：
	<embed src="...mp3" type="audio/mp3" width="100" height="100">
</audio>

video 跟 audio 使用相同
长度单位
	像素 px
	不同屏幕的像素大小不同 所以同样的200px在不同设备下显示效果不一样

	百分比
	可以将属性值设置为相对其父元素属性的百分比

	em
	相对于元素自己的字体大小来计算
	1em = 1font-size

	rem
	相对于根元素的字体大小来计算
	html{font-size:20px;}

颜色单位
	red,blue
	rgb值 rgb(255,255,255)
	rgba a表示不透明度 rgb(255,255,255,.5)
	十六进制RGB值 #ff0000 如果颜色两位两位重复 可以简写
		#aabbcc --> #abc
	HSL值 HSLA值
		H 色相（0-360）
		S 饱和度 颜色的浓度 0% - 100%
		L 亮度 颜色的亮度 0% - 100%
文档流
	--网页是一个多层的结构 一层一层叠加
	--通过css可以分别为每一层来设置样式
	--作为用户来讲只能看到最上面一层
	--这些层中 最底下的一层称为文档流 文档流是网页的基础 我们所创建的元素默认都是在文档流中进行排列
	--对于我们来说元素主要有两个状态 在文档流中 & 不在文档流中

	元素在文档流中的特点：
	--块元素
		--块元素会在页面中独占一行
		--默认宽度是父元素的全部（会把父元素撑满）
		--默认高度是被子元素内容撑开的

	--行内元素
		--行内元素不会独占页面的一行，只占自身大小
		--在页面中自左向右水平排列 如果一行之中不能容纳下所有的行内元素 内元素会换到第二行继续自左向右排列
		--默认宽高和高度都是被子元素内容撑开的
盒模型-块元素
	--css将页面中所有的元素都设置为了一个矩形的盒子
	--对页面的布局变成将不同的盒子摆放到不同的位置
	--每一个盒子都由以下几个部分组成：
		--内容区 content
		--内边距 padding
		--边框 border
		--外边距 margin

	元素中的所有元素和文本内容都在内容区排列 内容区的带线啊哦由width和height两个属性来设置
	.box{
		width:100px; 设置内容区的宽度
		height:100px; 设置内容区的高度
	}

	边框属于盒子边缘 边框的大小会影响到整个盒子的大小
	设置边框至少需要三个样式
	border-width
		有默认值 一般都是3个像素
	border-color
		有默认值 自动使用color的颜色值
	border-style
		默认值是none 表示没有边框

	内边距
		内容区和边框之间的距离是内边距
		内边距的设置会影响到盒子的大小
		背景颜色会延伸到内边距上

	外边距
		外边距不会影响盒子可见框的大小
		外边距会影响盒子的位置
		影响盒子实际占用网页的大小

	一个元素在其父元素中，水平布局必须要满足以下的等式
	margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 其父元素内容区的宽度（必须满足）
	以上等式必须满足 如果相加结果使等式不成立，则称为过度约束，等式会自动调整：
	--调整情况：
		--如果这七个值中没有为 auto 的情况，则浏览器会自动调整margin-right 值以使等式满足
		--这七个值中有三个值可设置为auto
		width(默认为auto)
		margin-left
		margin-right
		--如果某个值为auto，则自动调整为auto的那个值使等式成立
		--如果一个宽度和一个外边距设置为auto，则宽度调整为最大，设置为auto的外边距会自动为0
		--如果三个值都为auto，外边距都是0，宽度最大
		--如果两个外边距设置为auto 宽度固定，则会将两个外边距设置为相同的值，这个特点经常被用来使一个元素在其父元素中水平居中
		.inner{
			width:100px;
			margin:0 auto;
		}

	超出父元素内容区宽度时，margin-right会设置为负值。

	垂直外边距的折叠
		--相邻的垂直方向外边距会发生重叠的现象
		--兄弟元素
			--兄弟元素之间的相邻垂直外边距会去两者之间绝对值较大的（两者都是正值或都是负值）
			--如果相邻的外边距一正一负，则取两者的和
			--无需处理
		--父子元素
			--父子元素间相邻外边距，子元素会传递给父元素（上外边距）
			--父子外边距的折叠会影响到页面的布局 必须处理

	默认情况下，盒子可见框的大小由内容区、内边距和边框共同决定
		box-sizing 用来设置盒子尺寸的计算方式（设置width和height的作用）
		可选值：
		--content-box: 默认值，宽度和高度用来设置内容区的大小
		--border-box: 宽度和高度用来设置整个盒子可见框的大小
			此时width 和 height指的是内容区 和 内边距 和 边框 的总大小
盒模型-行内元素
	--行内元素不支持设置宽度和高度 其内容区就是被内容撑开的
	--行内元素可以设置padding，但是垂直方向padding不会影响页面的布局
	--行内元素可以设置border，但是垂直方向的border不会影响页面的布局
	--行内元素可以设置margin，但是垂直方向的border不会影响页面的布局

可以使用display设置元素显示的类型
	可选值
	--inline 将元素设置为行内元素
	--block 将元素设置为块元素
	--inline-block 将元素设置为行内块元素
		--即可以设置宽度和高度 又不会独占一行
	--table 将元素设置为一个表格
	--none 元素不在页面中显示
outline 用来设置元素的轮廓线，用法和border一样
	轮廓和边框不同的地方在于：轮廓不会影响到可见框的大小
	.box{
		outline:1px solid red;
	}
	一般用于设置鼠标移入效果之类的 不会影响到页面布局
box-shadow用来设置元素的阴影效果，不会影响到页面布局
  第一个值：水平偏移量
  正值向右
  负值向左
  第二个值：垂直偏移量
  正值向下
  负值向上
  第三个值：阴影的模糊半径
  第四个值：阴影的颜色
  .box {
  box-shadow: 10px 10px 50px rgba(0, 0, 0, 0.3);
}
border-radius用来设置圆角 圆角设置的是圆的半径大小
border-top-left-radius :10px 20px; 一个角的椭圆圆角
border-radius : 20px / 40px; 四个角同时设置椭圆圆角
border-radius : 50% 圆；
© 2025 Niko Xie