尝试瞎鼓捣一个页面2
微动学习190321
今天得正式一下自己存粹是瞎学的了
今天学习目标：文档流和属性继承
我也觉得我挺傻的，但是不真不知道怎么做。
插个嘴，一开始忘记连接外部样式，还想了半天，我太笨了
感觉自己学的太慢了，或多天了还在css
<html>
<head>
<title>123</title>
<link rel="stylesheet" type="text/css" href="1.css"/>
</head>
<body>
<div class="head">
<div class="h1">
<a href="">菜单</a>
<a href="">菜单</a>
<a href="">菜单</a>
</div>
<div class="h2">
<a href="">菜单</a>
<a href="">菜单</a>
<a href="">菜单</a>
</div>
</div>
</body>
</html>
.head{
width: 100%;
height: 50px;
border: 1px solid black;
}
.head a{
line-height: 50px;
}
.h2{
float: right;
border: 1px solid black;
}
.h1{
border: 2px dotted red;
}
嗯，这是代码
divh1,divh2都在head中，但是h1宽度却占了整行？
考虑1：h1继承了head的宽100%
修改1：
.head a{
line-height: 50px;
}
.h1{
border: 2px dotted red;
width: 100px;
height: 50px;
}
.h2{
float: right;
border: 1px solid black;
}
？？？？？？
h1宽高有所限定，超出部分文字溢出所处div，但是h1div还占据一行
h2的div还是被顶到下一行
考虑2：h2浮动造成的影响，我也不知道什么影响
ps：这是昨天写的，现在考虑是不是块元素什么的？那个也不是很明白
修改2：
.head a{
line-height: 50px;
}
.h1{
border: 2px dotted red;
width: 100px;
height: 50px;
}
.h2{
border: 1px solid black;
}
修改3：完全是碰巧，把divh2移动到h1之前，居然达到了想要的效果
<body>
<div class="head">
<div class="h2">
<a href="">菜单</a>
<a href="">菜单</a>
<a href="">菜单</a>
</div>
<div class="h1">
<a href="">菜单</a>
<a href="">菜单</a>
<a href="">菜单</a>
</div>
</div>
</body>
.head{
width: 100%;
height: 50px;
border: 1px solid black;
}
.head a{
line-height: 50px;
}
.h1{
border: 2px dotted red;
width: 200px;
height: 50px;
}
.h2{
float: right;
border: 1px solid black;
}
再取消对h1宽度限定
再取消对h1向右浮动
达到了预期效果
此时考虑现在的div h1和h2和head div没有关系了，
取消head div尝试
确实现在和head div没关系
思考，为什么一开始h2在h1之后，h1占一整行，
而把h2在h1之前，就达到预期效果
文档流是相对于盒子模型讲的
文本流是相对于文子段落讲的
元素浮动之后，会让它跳出文档流，也就是说当它后面还有元素时，其他元素会无视它所占据了的区域，直接在它身下布局。但是文字却会认同浮动元素所占据的区域，围绕它布局，也就是没有拖出文本流。
但是绝对定位后，不仅元素盒子会拖出文档流，文字也会出文本流。那么后面元素的文本就不会在认同它的区域位置，会直接在它后面布局，不会在环绕。
当然你可以使用 index-z 来让底部的元素到上面来，类似于一个图层的概念。
作者：张木大原
链接：https://www.zhihu.com/question/21911352/answer/102028085
来源：知乎
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。
大概是因为“元素浮动后会跳出文档流”所以把h2放到h1之前，h2无视了之后的流，所以看起来正常了，
元素浮动不会无视之前的文档流么？之前h2在h1之后，所以把h1浮动了就好了？
调整如下
.h1{
border: 2px dotted red;
float: left;
}
好神奇哈哈哈
可是现在他就和最外div-head没关系了，取消了也是这样显示的，
我想要达到的是，两个都包含在大的里面，
下面好好学一下盒子模型
学习于https://www.cnblogs.com/smyhvae/p/7256371.html
盒子模型，英文即box model。无论是div、span、还是a都是盒子。
但是，图片、表单元素一律看作是文本，它们并不是盒子。
所以我上面的div-head也是盒子啊，为什么不能装div-h2，div-h1为什么占了一整行？
一个盒子中主要的属性就5个：width、height、padding、border、margin。如下：
width和height：内容的宽度、高度（不是盒子的宽度、高度）。
注意：宽度和真实占有宽度，不是一个概念！
一些元素，默认带有padding
一些元素，默认带有padding，比如ul标签。
所以，我们做站的时候，为了便于控制，总是喜欢清除这个默认的padding。
可以使用*进行清除：
*{
margin: 0;
padding: 0;
}
但是，*的效率不高，所以我们使用并集选择器，罗列所有的标签（不用背，有专业的清除默认样式的样式表，今后学习）
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
code,form,fieldset,legend,input,textarea,p,blockquote,th,td{
margin:0;
padding:0;
}
叫个什么初始化标签？早就听说这个词了，今天才明白一点为什么要初始化默认值
所以知识要在实践中掌握
border属性是能够被拆开的，有两大种拆开的方式：
（1）按三要素拆开：border-width、border-style、border-color。（一个border属性是由三个小属性综合而成的）
（2）按方向拆开：border-top、border-right、border-bottom、border-left。
看完文章我觉得基本明白了，直到看到了下面的评论：
#1楼 2017-08-01 17:43 核桃大号
你写的这个盒子感觉不严谨啊，在不同浏览器width和height是指向不同的宽高的，不是你所说的完全指的是内容的宽高，而且在css3中已经有了两种模式，你这么不严谨的介绍很容易误人子弟啊
支持(2)反对(0)
#2楼[楼主] 2017-08-01 19:32 千古壹号
@ 核桃大号
内容都没有错。本文讲的是CSS 2.1，而不是CSS3。本文的盒子模型是标准盒子模型，而不是IE盒子模型。请留意本文的系列文章，以及历史文章。
我的天，这又是什么意思？？？？？？？？？？？？
继续回归正题，文档流：
版权声明：本文为博主原创文章 https://blog.****.net/zhujun_xiaoxin/article/details/56842848
理解好文档流，有助于我们对css中定位和浮动的理解。什么是文档流呢，经过我看过的一些文章，加入自己的理解。我得出文档流的定义如下：
1、从左至右，从上至上的布局。
2、符合html中标签本身含义的布局，比如某些标签独占一行。有些标签属于行内元素等。
下面来讲一个css中的定位机制，共三种：
1、正常的文档流
2、float
3、postion
在这几种定位机制中，有几种方式是脱离文档流的。什么是脱离文档流呢？可以这样理解，本来这个标签是属于文档流管理的，那么它应该按照文档流的正常布局方式从左至右从上之下，并且符合标签本身的含义。
脱离文档流是指，这个标签脱离了文档流的管理。不受文档流的布局约束了，并且更重要的一点是，这个标签在原文档流中所占的空间也被清楚掉了。
那么，这几种脱离文档的的定位机制包括哪些呢？
1、float
2、position：absolute
作者：xiaoxin_zj
来源：****
原文：https://blog.****.net/zhujun_xiaoxin/article/details/56842848
版权声明：本文为博主原创文章，转载请附上博文链接！
那么————什么标签单独占一行？比如div-h1，
——————什么标签属于行内元素呢？
可否把单独占一行的标签，变为行内元素？
——————至此，还是没把问题完全解决，我的问题是怎么样把div-h1-h2都放在
div-head中？以便于调整div-h1-h2的位置，居中左右的效果
摘自百度知道https://zhidao.baidu.com/question/1988012763773636867.html
行内元素列表:
<a>标签可定义锚
<abbr>表示一个缩写形式
<acronym>定义只取首字母缩写
<b>字体加粗
<bdo>可覆盖默认的文本方向
<big>大号字体加粗
<br>换行
<cite>引用进行定义
<code>定义计算机代码文本
<dfn>定义一个定义项目
<em>定义为强调的内容
<i>斜体文本效果
<img>向网页中嵌入一幅图像
<input>输入框
<kbd>定义键盘文本
<label>标签为
<input> 元素定义标注（标记）
<q>定义短的引用
<samp>定义样本文本
<select>创建单选或多选菜单
<small>呈现小号字体效果
<span>组合文档中的行内元素
<strong>语气更强的强调的内容
<sub>定义下标文本
<sup>定义上标文本
<textarea>多行的文本输入控件
<tt>打字机或者等宽的文本效果
<var>定义变量
————————————————————————————————————————————————————
块级元素列表:
<address>定义地址
<caption>定义表格标题
<dd>定义列表中定义条目
<div>定义文档中的分区或节
<dl>定义列表
<dt>定义列表中的项目
<fieldset>定义一个框架集
<form>创建 HTML 表单
<h1>定义最大的标题
<h2>定义副标题
<h3>定义标题
<h4>定义标题
<h5>定义标题
<h6>定义最小的标题
<hr>创建一条水平线
<legend>元素为
<fieldset>元素定义标题
<li>标签定义列表项目
<noframes>为那些不支持框架的浏览器显示文本，于 frameset 元素内部
<noscript>定义在脚本未被执行时的替代内容
<ol>定义有序列表
<ul>定义无序列表
<p>标签定义段落
<pre>定义预格式化的文本
<table>标签定义 HTML 表格
<tbody>标签表格主体（正文）
<td>表格中的标准单元格
<tfoot>定义表格的页脚（脚注或表注）
<th>定义表头单元格
<thead>标签定义表格的表头
<tr>定义表格中的行
图片来源百度
至此，有点问题，块级元素是单独占据一行么？
百度如下
https://zhidao.baidu.com/question/1605604659996540867.html
是，默认块级元素会开启新行。
另外块级元素可以包含行级元素和其他块级元素，而行级元素只能包含数据和其他行级元素。
里面说块级元素可包含行级和其他块级元素，所以div-head可以包含div-h1和h2
扩展资料：https://zhidao.baidu.com/question/1988012763773636867.html
一，从概念的角度解释块级元素和行内元素
1 块级元素，一般都是从新行开始，它可以容纳行内元素和其他块元素，常见块级元素比如div/p等。“form”这个快元素比较特殊,他只能来容纳其他块元素
2 行内元素：也叫做内联元素，一般都是语义级别的基本元素，内联元素已办只能容纳文本或者其他内联元素。
块元素（block element）和内联元素（inline element）都是html规范中的概念。块元素和内联元素的基本差异是块元素一般都是从新行开始的。
而当加了css控制以后，块元素可以变为内联元素，内联元素也可以变为块元素。
二，块级元素和内联元素的区别
1.块级元素会独占一行，其宽度自动填满其父元素宽度
行内元素不会独占一行，相邻的行内元素会排列到同一行里，直到一行排不下，才会换行，其宽度随元素的内容变化而变化，
2一般情况下，块级元素可以设置width,height属性，行内元素设置width,height无效
注意，块级元素设置了width宽度属性后仍然是独占一行的）
3.块级元素可以设置margin,padding属性
行内元素的水平方向的padding-left和padding-right都会产生边距效果，但是竖直方向上的padding-top和padding-bottom都不会产生边距效果
学习一下display标签
https://www.w3cschool.cn/cssref/pr-class-display.html
| 值 | 描述 |
|---|---|
| inline | 默认。此元素会被显示为内联元素，元素前后没有换行符。 |
| none | 不被显示 |
| block | 此元素将显示为块级元素，此元素前后会带有换行符。 |
| inline-block | 行内块元素 |
ok，那么什么是行内块元素？
摘自https://blog.****.net/weixin_40612082/article/details/80472807
一、块元素 block element
块元素的特性
独霸一行，总是在新行上开始
宽度缺省是它父级元素的100%，除非设定一个宽度
高度、行高、外边距、内边距都可以设置
可以容纳其他内联元素或者其他块元素
二、行内元素 inline element
行内元素的特性
和其他元素都在一行上，遇到父级元素边界会自动换行
高、行高以及内外边距都不可以改变
宽度与内容一样宽，且不可改变
行内元素只能容纳文本或者其他行内元素
对于行内元素，需要注意的是：设置宽度width无效，设置高度无效，可以通过设置line-height来设置，设置margin只有左右有效，上下无效，设置padding只有左右有效，上下无效
行内元素的间距问题
两个行内元素在一起，会出现一定的间距，即使将border、padding、margin都设置为零也无济于事，那么怎么才能去除这些间距呢？
1.重设字体
将行内元素的直接父级设置font-size=0px;再给行内元素设置字体大小就可以解决。
2.借助HTML注释
在两个行内元素之间加入HTML注释，告诉浏览器这中间不是换行也不是空格，而是连接在一起的，这样也可以解决。
三、行内块元素
行内块元素的特性
元素排列在一行
宽度默认由内容决定
元素间默认有间距
支持宽高、外边距、内边距的所有样式的设置
作者：重装大师1024
来源：****
原文：https://blog.****.net/weixin_40612082/article/details/80472807
版权声明：本文为博主原创文章，转载请附上博文链接！