【Html&Css】HTML&CSS总结笔记

1. a标签

         herf属性可以跳转到其他页面或者其他文件
         target属性指定跳转的页面打开的位置，是当前选项卡打开还是新建选项卡打开。
         默认 _self 当前选项卡
              _blank新建选项卡
         
      a标签的状态的，注意顺序
			:link  未被访问的时候的状态 
			:visited 访问之后的状态  
			:hover 鼠标悬停的状态   
			:active 点击时候的状态   

2. form表单

      布尔属性：
			required  必填项
			disabled  禁用
			readonly  只读
			autofocus 自动聚焦
			novalidate  不验证
			checked  单选或者复选的默认选中
			selected 下拉菜单中的默认选中的option

3. css语法

	css的声明
			属性名:属性值;
		css声明块
			{
				width:100px;
			}
		css声明块+css选择器=css样式表

4. css选择器

			标签选择器   权值-特性值1
			ID选择器   #id   100
			Class选择器  .class 10
			普遍选择器  *     0
			后代选择器  空格   0
			直接子代选择器  >  0
			下一个兄弟选择器  +  0
			之后所有的兄弟选择器  ~ 0

5.伪类选择器

			:nth-child(odd) 从前往后数，从1开始
				:nth-child(even)
				:nth-child(2)
				:nth-child(2n+1)
				:nth-child(2n)
				:nth-child(3n+2)
			:nth-last-child(n) 从后往前数，从1开始
			:first-child 作为别人的第一个孩子被选中
			:last-child作为别人的最后一个孩子被选中
			:only-child作为独生子被选中
			:first-of-type每种类型中的第一个
			:last-of-type每种类型中的最后一个
			:nth-of-type(n)每种类型中的第几个
			:nth-last-of-type(n)每种类型中的第几个,倒着数

6.伪元素选择器

			::before   在某个元素之前添加内容
			::after 在某个元素之后添加内容
			::first-line  第一行
			::first-letter 第一个字符
			::selection  页面上选中的文本

7.显示与隐藏元素

			display:none;  隐藏，不占屏幕空间
			display:inline/block/inline-block  显示
		
			visibility:hidden;  隐藏的，占据屏幕空间
			visibility:visible;  显示的
			opacity    0~1透明度  0不可见 1饱满形式

8.滚动条的设置

			overflow:hidden;  超出内容隐藏
			overflow:auto;  自动产生滚动条
			overflow:scroll;  无论内容超不超出都有滚动条

9.表单状态的

			:checked  radio和chengbox选中的控件
			:disabled 禁用的表单控件
			:enabled  可用的表单控件
			:focus    聚焦的表单控件
			:required  必填
			:optional  选填
			:invalid   无效
			:valid     有效
			:in-range  在范围内
			:out-of-range  在范围外

10. css级联

	      1.！important
	      2.特性值--权值
	            style内  1000
				#id      100
				.class,属性选择器,伪类选择器   10
				标签选择器,伪元素选择器   1
				空格,>,+,~   0

11.w3c盒子模型：标准盒子模型，默认的盒子模型。

设置的宽高，就是内容区的宽高。

  盒子的宽高：除了margin，其他的累加（border+padding+内容区）。
	    宽：width+padding-left+padding-right+border-right+border—left
	    高：heigth+padding-top+padding-bottom+border-left+boder-right
  所占屏幕空间：
	    宽：width+padding-left+padding-right+border-right+border—left+margin-left+margin-right
	    高：heigth+padding-top+padding-bottom+border-left+boder-right+margin-top+margin-bottom

12.IE盒子模型：

设置的宽高就是盒子的宽高。

	  内容区的宽高
	    宽：width-borderLeft-borderRight-paddingLeft-paddingRight
	    高：height-borderTop-borderBottom-paddingTop-paddingBottom
	  所占屏幕的宽高：
	    宽：width+marginLeft+marginRight
	    高：height+marginTop+marginBottom

13.盒子的转换

   box-sizing属性
      content-box w3c盒子（content内容区）
      border-box  IE盒子 （设置的是boder区）

14.浮动

    浮动元素
       float：浮动元素脱离文档流，单独存在在页面的上方，飘起来的，原来的位置不保留，会影响其他元素的布局。
    清除浮动
       兄弟之间清除浮动使用clear clear：both；清除浮动对当前元素产生的影响
          .clear-div{
             clear: both;
           }
         <div class="clear-div"></div>
       父子之间清除浮动overflow  overflow: hidden;清除浮动的子元素对父元素的影响  

15.CSS的继承

	   继承属性 color font-size
	    不继承属性 border
	    color：inherit；继承
	    color：initial；不继承
	    color：unset；原先继承就继承原先不继承就不继承。

16.定位

		position	
			static 静态定位
			absolute 绝对定位
				如果祖先元素中有定位元素，那么相对于离它最近的祖先定位元素定位。如果没有，参照视口区的左上角
				默认是在当前位置飘起来，原先的位置不保留
			relative 相对定位
				相对于它原先在文档流中的位置
				默认是在当前位置飘起来，原先的位置保留
			fixed  固定定位
				固定在浏览器的某个位置上
		定位属性
				top
				bottom
				left
				right
				z-index 层叠顺序 0 
		**浮动元素和定位元素如果不设置固定的宽，那么没有宽，宽是由内部子元素撑起来的**

17.flex布局

弹性盒布局
	容器
		父元素
		display:flex;
		flex-direction:row;
			row 默认，排在一行，方向从左往右，主轴是x轴
			row-reverse 排在一行，方向从右往左，主轴是x轴
		flex-wrap: nowrap(默认)/wrap
		flex-flow:row wrap;
		align-content: flex-start;
			在换行的情况下，产生多主轴，多主轴在交叉轴上起点对齐
		align-content: flex-end;
			多主轴在交叉轴上终点对齐
		align-content: center;
			多主轴在交叉轴上居中对齐
		align-content: space-between;
			多主轴在交叉轴上之间有间距
		align-content: space-around;
			多主轴在交叉轴上周边有间距
		align-content: stretch;
			默认的，拉伸主轴的交叉轴，占满容器
		justify-content: flex-start;
			主轴起点对齐，默认
		justify-content: flex-end;
			主轴终点对齐
		justify-content: center;
			主轴居中对齐
		justify-content: space-between;
			项目之间有间距
		justify-content: space-around;
			项目周边有间距
		align-items: flex-start;
			在交叉轴上起点对齐，默认
		align-items: flex-end;
			在交叉轴上终点对齐
		align-items: center;
			在交叉轴上居中
		align-items: stretch;
			项目没有设置高度的情况下，在交叉轴上进行拉伸，布满容器

	项目
		子元素
		flex-grow:  默认0  占据容器剩余空间的几分之几
		flex-shrink: 默认1 缩小的比例
		flex-basis  固定值
		flex: flex-grow [flex-shrink] [flex-basis];
			flex:1 200px; 最小200
			flex:0 200px; 固定值200
		order 默认0，值越小越靠前
	主轴
		x轴或者y轴
	交叉轴
		y轴或者x轴
	起点
		x轴从左往右  左
		x轴从右往左  右
		y轴从上往下  上
		y轴从下往上  下
	终点
		x轴从左往右  右
		x轴从右往左  左
		y轴从上往下  下
		y轴从下往上  上

18.12栅格布局

	bootstrap框架中栅格布局
		一行有12列，可以指定div占几列
		.row{}
		.col-sm-1{}
		.col-sm-2{}
		.col-sm-3{}
		.col-sm-4{}
		.col-sm-5{}
		.col-sm-6{}
		.....
		.col-sm-12{}

19.变形transform:

  旋转  rotate()
        transform: rotate(20deg);/*rotate旋转30deg旋转30度*/
                   rotateX rotateY rotateZ
        transform-origin:设置原点           
   倾斜  skew()
   放大或缩小scale()
   平移  translate()

20.过渡transition:

   过渡的属性 过渡的时间 时间函数 延迟时间
             /*变宽 3s之后 先快后慢 鼠标悬停2s开始过渡 */
			 transition: width 3s ease 2s;
			 transition: all 3s ease 2s;变多个属性

21.动画

animation-name
		animation-duration
		animation-delay 动画延迟
		animation-timing-function  时间函数
		animation-fill-mode 动画填充
			forwards  使用最后一个状态去填充
		animation-direction 方向
		animation-iteration-count 动画执行次数  infinite

22.媒体查询

	在不同设备上显示不同的样子
	@media screen and (max-width:992px){
		div{
			width:300px;
			background:pink;
		}
	}
	@media screen and (min-width:992px){
		div{
			width:500px;
			background:blue;
		}
	}