html css特点,HTML CSS

HTML、CSS

html

百度

文本级元素，但是可以设置宽和高

或者

[图片上传失败...(image-43b3ba-1586177956872)]

Username:

Passsword:

Gender: 男

女

Interests:

学历:

头像:

描述：

CSS

三原色

#ffffff; 还有一种简写形式 #fff;

#eeeeee; #eee;

CSS选择器

id选择器 #id

类选择器 .cls

标签选择器 div span p

通配符选择器 *{margin: 0; padding: 0;}

父子选择器

ul > li {

}

后代选择器(使用的最多)

div li {

}

交集选择器(使用)

p#box {

}

p.box {

}

并集选择器

p#box > p.box { /** 这不是并集选择器,只是为了对比写法，他是一个父子选择器 */

}

p#box,p.box {

}

CSS3的选择器

ul > li:first-child { /* 选中是id为a的li */

}

ul > li:nth-child(1) { /* 选中是id为a的li */

}

ul > li:nth-child(3) { /* 选中是id为c的li */

}

ul > li:last-child { /* 选中是id为d的li */

}

ul > li:nth-child(2n) { /* 选中是id为b、d的li */

}

ul > li:nth-child(2n + 1) { /* 选中是id为a、c的li */

}

• a标签的伪选择器

  爱恨法则 love hate

  a:link 正常连接情况下

  a:vistied 已经访问过

  a:hover 当鼠标滑过的时候

  a:active 当鼠标点击但没有松开的时候

  行内元素和块级元素

  div li ul ol table form p h 块级元素，独占一行

  a span b i u input select textarea button img 行内元素, 除了img可以设置宽高，其他元素宽高依据内容而定。

  a标签中可以放块级元素，在写的时候一定要转成块级元素。

  display: block;

  display: inline; 如果将一个div使用该属性, 该div就成为了一个行内元素。

  dispaly: inline-block; 即具有块级元素的部分特征(可以设置宽高, 没有独占一行)，又具有行内元素的特征，可以并排摆放。

  单行文本的垂直显示

  将文字的行高和盒子的高度设置为一致的。

  背景

  background-color: #ffffff;

  background-image: url(图片路径);

  background-position: (left center right)(top center bottom)； 或者可以写坐标

  background-repeat: no-repeat; /* repeat-x repeat-y */

  CSS三大特性

  层叠性

  .box {

  height: 200px;

  width: 200px;

  }

  div.box {

  background-color: red;

  }

  继承性

  color a标签不能继承color属性

  font-

  text-

  line-

  div.box{

  font-size: 30px;

  line-height: 50px;

  }

  文字

  权重

  id,class,tag

  div{ /* 0,0,1*/

  color: pink !important;

  }

  div#box .box1 div.box2 { /* 1,2,2 */

  color: red;

  }

  #box #box1 div{ /* 2,0,1 */

  color: green;

  }

  div.box .box1 #box2 { /* 1,2,1 */

  color: black;

  }

  #box #box1 #box2 { /* 3,0,0 */

  color: red;

  }

  #box #box1 div#box2 { /* 3,0,1 */

  color: yellow;

  }

  文字

  盒子模型

  border

  borde: 1px solid red;

  padding

  padding-top: 10px;

  padding: 1个值 2个值 3个值 4个值

  margin

  margin-bottom: 10px;

  盒子模型的坑

  1.上下的盒子的外边距会有重叠问题。解决方式，只给上盒子设置margin-bottom或者只给下盒子设置margin-top;

  2.父子盒子情况下，如果子盒子设置了margin-top，会整体将父子盒子都会向下偏移。

  ​ a) 给父盒子设置上的border，border-top: 1px solid transparent;

  ​ b)给父盒子设置上的overflow： hidden;

  ​ c) 给父盒子设置 padding-top: 10px;

  浮动

  浮动的元素脱离了标准的文档流。(position: absolute;)

  float: left 、right;

  清除浮动

  ​ 对于一个盒子，如果他的子元素都设置了浮动，那么而父盒子并没有设置高度，那么父盒子会有高度塌陷的问题。清除浮动目的是让父盒子自动的适应子盒子的最大高度。

  overflow: hidden;

  w3c提供的一种方式：内墙法。

  .inner-box {

  height: 100px;

  width: 100px;

  background-color: red;

  float: left;

  }

  .clearfix {

  clear: both;

  }

  其他比较优秀的处理方式。

  .clearfix:before,.clearfix:after {

  content: "";

  display: table;

  }

  .clearfix:after {

  clear: both;

  }

  .clearfix {

  *zoom: 1;

  }

  定位

  相对定位

  ​ 相对于盒子之前的位置来定位，但是重新定位的盒子之前的位置并不会让出来，只是在盒子的展示上发生了变化。相对定位两种用法：

  微调元素；

  子绝父相。

  绝对定位

  ​ 绝对定位的盒子脱标了，它的定位如果没有给它祖先元素设置 relative, 那么他是相对于浏览器来定位，这种情况实际工程价值不大。

  CSS3的样式

  渐变

  background-image: linear-grediant(to bottom, red, green)

  状态的转换

  transform: rotate(35deg); /** 旋转 */

  transform: translate(0, 5px); /** 移动, 在y轴方向向下移动5px */

  transform: scale(1.2); /* 将盒子放大1.2倍*/

  阴影

  box-shadow: 5px 5px 5px red;