html和css笔记

1.css3 box-sizing属性

 /* 内减模式，元素的总高度和总宽度包含内边距和边框(padding和border)
 注：border-box不包含margin*/
 box-sizing: border-box;
 
 /*默认值。设一个元素宽为100px，则元素内容区就有100px，添加的边框和内边距宽度会在100px基础上增加*/
 box-sizing:content-box;

2.margin【这个问题经常遇到】

margin:上  右  下  左；

margin:上  左右  下;

margin:上下  左右;

padding属性和margin类似

子元素设置margin影响父元素（塌陷问题）：

同级或者嵌套的盒子，并且它们之间没有非空元素、padding或border分隔，那元素的margin将会合并为一个margin共享。 所以，在样式表中优先级更高子元素的margin会覆盖外层父元素定义的margin。

父元素的第一个子元素的上边距margin-top如果碰不到有效的border或padding就会不断的一层一层的找自己的“领导”元素（父元素、祖先元素）

解决办法：

1、父元素或者子元素使用浮动或者绝对定位。
2、父级设置overflow:hidden
3、父级设置padding（破坏非空白的折叠条件）;
4、父级设置border
5、父元素设置display：inline-block；

可以理解为给margin找一个依附边界，这个边界是父元素的border或padding.如果找不到，就一直向外，超越父元素之外，将所有margin数值变作父元素margin数值。

3.伪元素 ::before ::after

伪元素是一个附加至选择器末的关键词，允许你对被选择元素的特定部分修改样式。

例1：
<q>一些引用</q>, 他说，<q>比没有好。</q>.

/* 必须要content属性*/
q::before {
  content: "«";
  color: blue;
}
q::after {
  content: "»";
  color: red;
}

蓝色<<一些引用>>红色, 他说，蓝色<<比没有好。>>红色.

例2：
可以给盒子添加短边框，用position：absolute;

4.清除浮动的方法

父子级标签，子级浮动，父级没有高度，后面的标准流盒子会受影响，显示到上面的位置。

1.额外标签法，在浮动元素末尾添加一个空的块级元素标签

<div class="clearfix"></div>

.clearfix {
    /* 清除左右两边浮动的影响 */
    clear: both;
}

2.给父级元素添加overflow：hidden属性

3.单伪元素清除法：用伪元素替代额外标签 (和额外标签法原理是一样的)

.clearfix::after {
        content: "";
        /* 伪元素添加的是行内，要求是块元素 */
        display: block;
        clear: both;
        /* 为了兼容性 */
        height: 0;
        visibility: hidden;
 }

4.双伪元素

.clearfix::before,
.clearfix::after {
        content: "";
        display: table;
}

.clearfix::after {
        clear: both;
}

5.常见的盒子垂直居中的方法【这个问题经常遇到】

（1）利用子绝父相定位的方式

#container{
    width:500px;
    height:500px;
    position:relative;
}
#center{
    width:100px;
    height:100px;
    position:absolute;
    top:50%;
    left:50%;
    margin-top:-50px;
    margin-left:-50px;
}

这是在没有margin的条件下，top：50%意思是在父盒子的50%的地方，所以如果要居中的话，还要加上margin-top，且是子盒子高度的一半。

（2）利用css3的transform，可以轻松的在未知高度的情况下实现元素的垂直居中：

#container{
    position:relative;
}
#center{
    position:absolute;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}

在工作中遇到的问题：

设置login.vue中最外层div的宽为1920px；高为1080px，在index.html中设置了margin:0;padding:0;overflow:hidden;属性来隐藏水平滚动条和垂直滚动条{也可以用overflow-x:hidden;overflow-y:hidden;属性来设置隐藏}，之后设置登录框(子盒子)在div页面的居中位置，在子盒子中用了position:absolute;但div盒子中如果用position:relative;位置就不居中了？
分析原因:不设相对定位的时候，子盒子找父元素会找到html标签，因为没有相对定位，会 一直向上找，直到找到根节点为止,而且宽高是视图的宽高，然而当div设置相对定位的时候，首先宽高就会按照1920*1080来计算，而且当div位置发生变化时，子盒子也会发生变化。

（3）flex布局（在父盒子上设置flex）

#container{
    display:flex;
    justify-content:center;
    align-items：center；
}
#center{
   
}
复制代码

6.border-radius

（1）四个值 - border-radius: 15px 50px 30px 5px

（2）三个值 - border-radius: 15px 50px 30px

（3）两个值 - border-radius: 15px 50px

（4）椭圆边角

7.css3属性之text-overflow:ellipsis详解

text-overflow:clip | ellipsis

默认值:clip;

适用于:所有元素

clip:当前对象内文本溢出时不显示省略标记(...),而是将溢出部分裁剪。

ellipsis:当对象内文本溢出时显示省略标记(...)。

当然这还是不够的，需要配合另外两个属性才能出现效果:

overflow:hidden

white-space:nowrap;

遇到两行出现省略了~~ 解决办法：

将white-space去除，并且加上:

display:-webkit-box;

-webkit-line-clamp: 3/第几行裁剪/

-webkit-box-orient:vertical;

-webkit-line-clamp 用来限制在一个块元素显示的文本的行数。 为了实现该效果，它需要组合其他的WebKit属性。 常见结合属性：
2-1.display: -webkit-box; 必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。
2-2.-webkit-box-orient 必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式 。
2-3.text-overflow: ellipsis; ，可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。

原文链接：blog.csdn.net/u013084331/…

8.letter-spacing,word-spacing的对比与区别

letter-spacing 属性增加或减少字符间的空白（字符间距）。

该属性定义了在文本字符框之间插入多少空间。由于字符字形通常比其字符框要窄，指定长度值时，会调整字母之间通常的间隔。因此，normal 就相当于值为 0。

<p style="letter-spacing:10px;"> thisisatest </p>
//显示： t  h  i  s  a  t  e s t
<p style="letter-spacing:10px;"> 这是一个测试</p>
//显示：这   是   一   个   测   试

word-spacing  属性增加或减少单词间的空白（即字间隔）。

该属性定义元素中字之间插入多少空白符。针对这个属性，“字” 定义为由空白符包围的一个字符串。如果指定为长度值，会调整字之间的通常间隔；所以，normal 就等同于设置为 0。允许指定负长度值，这会让字之间挤得更紧。

<p style="word-spacing:10px;"> this is a  test</p>
//显示： this   is    a     test*/
<p style="word-spacing:10px;">这  是   一   个  测  试 </p>
//显示: 这     是      一      个     测    试

letter-spacing,word-spacing的区别

word-spacing 属性增加或减少单词间的空白（即字间隔）。 letter-spacing 属性增加或减少字符间的空白（字符间距）。word-spacing意思是设置单词间的间距，如何区别是不是为一个单词呢，这里我们可以看出 用空格隔开的为一个单词，所以在执行word-spacing:10px;执行的前后可以发现，执行后空格变得更大了！！