个人笔记 - 关于HTNL、CSS的一些理解

HTML的块级标签和行内标签

块级标签

作用：

• 主要用于对页面进行宏观布局

特点：

• 独占一行
• 可以设置其宽度、高度，内外边距
• 可以容纳其他元素，p元素是例外不能放置任何块元素

 <div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>、<hr/>
     /*H5新增语义化标签*/
<header>、<nav>、<main>、<section>、<hgroup>、<article>、<aside>、<footer>、<video>、<audio>、
     

行内标签

作用：

• 主要是包裹文字

特点：

• 不会独占一行
• 元素的高度、宽度、行高及边距不可设置；
• 默认被内容撑开
• img可以设置宽高
• a元素可以放置除了自身以外的任意标签

<a>、<img>、<input>、<label>：标注标签、<select>、<option>、<span>、<textarea>、<button>、<i>、<sub>、<sup>、<em>、

补充

行内块元素

• 可以设置宽度和高度，又不会独占一行

块级标签和行内标签的特点不是一成不变的，可以通过设置display属性来改变他们的布局特点

div{
    display:inline;//使元素只具有内联标签的特点
    display: inline-block;//使元素同时具有内联标签和块级标签的特点
    display:none;//元素不显示，不会占用位置
   	visibility:hiddne;//元素隐藏，会占用位置
}
span{
    display: block;使元素具有块级标签的特点
    display:table;//将元素设置为一个表格
}

关于盒子模型的认识

盒子模型分为标准盒模型和边框盒模型

div{
     box-sizing:content-box;//标准盒模型
     box-sizing:border-box;//边框盒模型
}

标准盒模型

特点：

• 盒子的可见框大小是由内容区+内边距+边框共同决定的
• padding、border、会撑开盒子

边框盒模型

特点：

• padding、border、不会撑开盒子
• 盒子可见模型是由内容区决定，（把内边距、边框的计算方式放进了内容区里了），会把盒子变小

补充

在文档流中一个子元素在其父元素中水平布局必须要满足以下等式：

margin-left + border-left + padding-left + width + padding-right + border-right + margin-right = 父元素的内容区的宽度
/*子元素的左右外边距+左右边框+左右内边距+子元素宽 必须等于父元素的内容区宽度*/

如果等式不成立则称其为过度约束，此时如果七个值里没有auto的情况，浏览器会自动调整margin-right(右外边距)使等式成立。

此时可以设置成auto的值：

width
margin-left
margin-right

• 如果设置了这三个值中的一个为auto则浏览器会自动调整该值使等式成立
• 块元素如果没有设置宽度默认为父元素的100%，
• 如果将一个宽度和一个外边距设置成auto，则宽度会调整到最大，设置为auto的外边距自动为0
• 如果三个值都是设置成auto，则外边距都是0，宽度最大

这也是为什么设置margin：0 auto;能够使元素在父元素里水平居中

关于css选择器权重的理解

!important       最高优先级
内联选择器          1,0,0,0
id选择器           0,1,0,0
类和伪类选择器	  0,0,1,0
元素选择器          0,0,0,1
通配选择器          0,0,0,0
继承的样式		  没有优先级

伪类和伪元素的的理解

伪类

用来描述一个元素的特殊状态：比如我们要选择处于某个状态的元素，或者给某一个处于特殊状态的元素设置特殊的样式时就需要用到伪类 ：第一个子元素、被鼠标点击的元素、鼠标移入的元素、…此时就需要用伪类选择器来选择

用法：

• 一般情况下都是使用 : 开头

选择器	例子	例子描述
:active	a:active	选择活动的链接。
:checked	input:checked	选择每个被选中的 元素。
:disabled	input:disabled	选择每个被禁用的 元素。
:empty	p:empty	选择没有子元素的每个 元素。
:enabled	input:enabled	选择每个已启用的 元素。
:first-child	p:first-child	选择作为其父的首个子元素的每个 元素。
:first-of-type	p:first-of-type	选择作为其父的首个 元素的每个 元素。
:focus	input:focus	选择获得焦点的 元素。
:hover	a:hover	选择鼠标悬停其上的链接。
:in-range	input:in-range	选择具有指定范围内的值的 元素。
:invalid	input:invalid	选择所有具有无效值的 元素。
:lang(language)	p:lang(it)	选择每个 lang 属性值以 “it” 开头的 元素。
:last-child	p:last-child	选择作为其父的最后一个子元素的每个 元素。
:last-of-type	p:last-of-type	选择作为其父的最后一个 元素的每个 元素。
:link	a:link	选择所有未被访问的链接。
:not(selector)	:not§	选择每个非 元素的元素。
:nth-child(n)	p:nth-child(2)	选择作为其父的第二个子元素的每个 元素。
:nth-last-child(n)	p:nth-last-child(2)	选择作为父的第二个子元素的每个 元素，从最后一个子元素计数。
:nth-last-of-type(n)	p:nth-last-of-type(2)	选择作为父的第二个 元素的每个 元素，从最后一个子元素计数
:nth-of-type(n)	p:nth-of-type(2)	选择作为其父的第二个 元素的每个 元素。
:only-of-type	p:only-of-type	选择作为其父的唯一 元素的每个 元素。
:only-child	p:only-child	选择作为其父的唯一子元素的 元素。
:optional	input:optional	选择不带 “required” 属性的 元素。
:out-of-range	input:out-of-range	选择值在指定范围之外的 元素。
:read-only	input:read-only	选择指定了 “readonly” 属性的 元素。
:read-write	input:read-write	选择不带 “readonly” 属性的 元素。
:required	input:required	选择指定了 “required” 属性的 元素。
:root	root	选择元素的根元素。
:target	#news:target	选择当前活动的 #news 元素（单击包含该锚名称的 URL）。
:valid	input:valid	选择所有具有有效值的 元素。
:visited	a:visited	选择所有已访问的链接。

伪元素

表示页面里一些特殊的并不真实存在的元素（处于特殊位置的一些元素）

用法：

• 使用 :: 开头

选择器	例子	例子描述
::after	p::after	在每个 元素之后插入内容。
::before	p::before	在每个 元素之前插入内容。
::first-letter	p::first-letter	选择每个 元素的首字母。
::first-line	p::first-line	选择每个 元素的首行。
::selection	p::selection	选择用户选择的元素部分。

css浮动

元素默认是排列在文档流中的，当开启浮动时，元素会脱离文档流。

开启浮动的特点：

• 水平布局的等式不需要强制成立（子元素的左外边距+左边框+左内边距+子元素宽+右内边距+右边框+右外边距 必须等于父元素的内容区宽度）默认调整margin-right

• 元素会脱离文档流（脱离文档流之后就不需要区分块元素和行内元素了），不在占用文档流的位置。

• 设置浮动后元素会向父元素的左侧或后侧移动

• 浮动元素不会从父元素中移出来

• 浮动元素向左或向右移动时不会盖住其他浮动的元素

• 如果浮动元素上边是一个没有浮动的块元素，则浮动元素无法上移

• 浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围

• 块元素：不在独占一行，宽度和高度默认都被内容撑开

• 行内元素：变成块元素，支持宽高，不在独占一行，宽度和高度默认都被内容撑开

浮动的作用：

• 制作水平方向的布局（让页面中的元素水平排列）

浮动存在的问题：

高度塌陷

• 在浮动布局中，父元素的高度默认是被子元素撑开的，子元素浮动后会完全脱离文档流，无法撑起父元素的高度，导致父元素的高度丢失。

解决办法

.因为浮动而失去高度的父元素::after{
    display:"block";
    content:"";
    clear:"both";//清除清除两侧浮动影响最大的一侧
    /*原理是设置清除浮动后，浏览器会自动为元素添加一个上外边距，使他的位置不受其他元素影响*/
}

一般会与外边距重叠问题一起解决

        .clearfix::after,
        .clearfix::before{
        /* //将他显示为一个表格，（表格有边框，可以将父子元素的外边距隔开），解决重叠问题 要给折叠的父元素/失去高度的元素设置 */
        display: table;
        content:"";
        clear:"both";
    }

外边距重叠问题

相邻的垂直方向的父子元素的外边距会发生重叠现象，

<style>
	.box1{
   	 	 width: 300px;
         height: 300px;
         border: 10px #ff0 solid;
}
	.box2{
    	 width: 100px;
         height: 100px;
         border: 10px #f00 solid;
    	margin-top=100px;//此时父元素也会跟随子元素一起向下移动100px
}
</style>
<div class="box1">
	<div class="box2"></div>
</div>

解决办法在清除浮动那块

position

• 我的理解position是用来定义建立元素布局所用的定位机制。任何元素都可以设置定位属性。
• 不过绝对或固定元素会生成一个块级框，而不论该元素本身是什么类型。也就是拥有了脱离文档流的特点。
• 相对定位元素会相对于它在正常流中的默认位置偏移。

值	描述
absolute	生成绝对定位的元素，相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
fixed	生成绝对定位的元素，相对于浏览器窗口进行定位。元素的位置通过 “left”, “top”, “right” 以及 “bottom” 属性进行规定。
relative	生成相对定位的元素，相对于其正常位置进行定位。因此，“left:20” 会向元素的 LEFT 位置添加 20 像素。
static	默认值。没有定位，元素出现在正常的流中（忽略 top, bottom, left, right 或者 z-index 声明）。
inherit	规定应该从父元素继承 position 属性的值。
sticky	它主要用在对 scroll 事件的监听上；简单来说，在滑动过程中，某个元素距离其父元素的距离达到 sticky粘性定位的要求时(比如top：100px)；position:sticky这时的效果相当于fixed定位，固定到适当位置

flex布局

作用

• css3的布局方式，主要代替浮动来实现布局，

• flex可以使元素具有弹性，让元素可以跟随页面的大小的改变而改变

• display:flex可以使元素变成弹性容器

• 弹性容器的直接子元素是弹性元素 （不是弹性容器的直接子元素就不是弹性元素）

• 一个元素可以同时是弹性容器和弹性元素

弹性容器属性

• 主轴：弹性元素的排列方向成为主轴

• 侧轴：与主轴垂直方向的

• flex-direction指定弹性容器中弹性元素的排列方式（设置主轴方向）

  flex-direction:row;//默认（主轴从左向右），弹性元素在弹性弹性容器中水平排列。
  flex-direction:row-column;//（主轴从右向左）
  
  flex-direction:column;//弹性元素纵向排列（主轴自上向下）
  flex-direction:column-column；//（主轴自下向上）
  

• flex-wrap设置弹性元素是否在弹性容器中自动换行

  flex-wrap:nowrap;//默认不换行
  flex-wrap:wrap;//元素一行放不下时，沿着侧轴方向自动换行
  flex-wrap:wrap-reverse;//沿着侧轴反方向自动换行
  

• flex-flow是wrap和direction的简写属性

  flex-flow:row wrap;//不区分顺序,可同时设置排列方式和是否换行
  

• justify-content主轴上元素如何排列，（当主轴还有空白空间时）

  justify-content:flex-start;//默认元素沿着主轴起始边排列
  justify-content:flex-end;//元素沿着主轴终止边排列
  justify-content:center;//元素居中排列
  justify-content:space-around;//空白分配到元素两侧
  justify-content:space-evenly;//空白会分配到同一侧（兼容性不是很好）
  justify-content:space-between;//元素充满两边，空白均匀分布在中间
  

• align-items元素在辅轴上的排列方式

  align-items:stretch;//默认将元素设置为相同的值（行与行之间的高度相等）
  align-items:flex-start;//沿着辅轴起始边对齐
  align-items:flex-end;//沿着辅轴终止边对齐
  align-items:center;//居中对齐
  align-items:base-line;//基线对齐，沿着文字的基线对齐
  

• align-content辅轴空白空间的分配

  align-content:center;//上下空白相等，元素在中间
  align-content:flex-start;//元素靠上对齐，空白在下
  align-content:flex-end;//元素靠下对齐，空白在上
  align-content:space-between;//两端对齐
  

弹性元素的属性

• flex-grow指定弹性元素的增展系数（当父元素有多余的空间时，子元素如何伸展）

  flex-grow:0;//默认为0，不伸展
  flex-grow:1;//父元素的剩余空间会按照比例进行分配（根据需要给不同的子元素设置）
  

• flex-shrink指定弹性元素的收缩系数(当父元素空间容纳不下子元素时，对子元素进行收缩)

  flex-shrink:0;//不收缩
  flex-shrink:1;//等比例收缩
  flex-shrink:3;//值越大收缩得越多
  

• align-self用来覆盖当前元素上的align-items(元素在辅轴上的排列方式);

  align-self:auto;//默认值。继承父容器的 align-items 属性。没有父容器则为 "stretch"。
  align-self:stretch;//元素被拉伸以适应容器。
  align-self:center;//元素位于容器的中心。
  align-self:flex-start;//元素位于容器的开头。
  align-self:flex-end;//元素位于容器的结尾。
  align-self:baseline;//元素位于容器的基线上。