css实战基础

盒子模型

盒模型-W3C 标准盒模型

  1. 属性width,height只包含内容content，不包含border和padding。

1

IE 盒模型：

  1. *属性width,height包含border和padding，指的是content+padding+border。*

1
在ie8+浏览器中使用哪个盒模型可以由box-sizing(CSS新增的属性)控制，默认值为content-box，即标准盒模型；如果将box-sizing设为border-box则用的是IE盒模型。如果在ie6,7,8中DOCTYPE缺失会触发IE模式。在当前W3C标准中盒模型是可以通过box-sizing自由的进行切换的。
lDlU1zbjGQA.jpg

浮动和清除浮动

浮动核心就一句话：浮动元素会脱离文档流并向左/向右浮动，直到碰到父元素或者另一个浮动元素。请默念3次！
清除浮动主要有两种方式，分别是clear清除浮动和BFC清除浮动，其他的你也不用去了解了。

  • clear:both;

    1. / 全浏览器通用的clearfix方案【推荐】
    2. // 引入了zoom以支持IE6/7
    3. // 同时加入:before以解决现代浏览器上边距折叠的问题
    4. .clearfix:before,
    5. .clearfix:after {
    6.   display: table;
    7.   content: " ";
    8. }
    9. .clearfix:after {
    10.   clear: both;
    11. }
    12. .clearfix{
    13.   *zoom: 1;
    14. }

  • BFC全称是块状格式化上下文，它是按照块级盒子布局的。我们了解他的特征、触发方式、常见使用场景这些就够了。 我们可以给父元素添加以下属性来触发BFC：
    float 为 left | right
    overflow 为 hidden | auto | scorll
    display 为 table-cell | table-caption | inline-block | flex | inline-flex
    position 为 absolute | fixed

所以我们可以给父元素设置overflow:auto来简单的实现BFC清除浮动，但是为了兼容IE最好用overflow:hidden。但是这样元素阴影或下拉菜单会被截断，比较局限。

flex弹性布局

Flex 是 Flexible Box 的缩写，意为”弹性布局”，用来为盒状模型提供最大的灵活性。
justify-content属性定义了项目在主轴上的对齐方式。
align-items属性定义项目在交叉轴上如何对齐。

  1. .box{
  2.     justify-content: flex-start | flex-end | center | space-between | space-around;
  3.   flex-wrap: nowrap | wrap | wrap-reverse;
  4.     flex-direction: row | row-reverse | column | column-reverse;
  5.   align-items: flex-start | flex-end | center | baseline | stretch;
  6. }

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。

  1. .item {
  2.   order: <integer>;
  3.     align-self: auto | flex-start | flex-end | center | baseline | stretch;
  4. }

阻止多次点击框架文本被选中状态

  1. summary {
  2. -webkit-user-select: none;
  3. -moz-user-select: none;
  4. -ms-user-select: none;
  5. user-select: none;
  6. }

内容超出部分隐藏

  1. overflow:auto(没超出不加滚动条，超出部分加滚动条)；
  2. overflow：hidden(无论如何隐藏滚动条，具体还可以设置横轴隐藏-x，和纵轴隐藏-y)；
  4. visibility:hidden;(隐藏，但依然占据着页面原有空间位置)；
  5. display:none;(隐藏，不占据空间位置，在页面中彻底消失)；

background属性综合顺序

  1. background：background-color，background-image，background-repeat，background-attachment，background-position

一般用的较多的是处理透明背景background-color:tranparent,还有半透明rgba，渐变等

关于图片绝对定位后依然无法置底问题

在父元素设置了相对定位position:relative后，子元素设置绝对定位置底，但是页面的显示效果依然还会有一点缝隙，这是文本默认占据的空间, 我们的处理方法是回到父元素，给文本添加font-size:0px;就ok了

关于浮动的理念理解

文档流一层，漂浮在一层，定位又是一层。所以想要元素在同一水平层，必须设置统一的属性样式

提供给用户的输入框

我们要注意input是支持单行输入，都用在表单，搜索等地方；但是涉及到评论，动态之类的需要多行文本输入的，换用textarea

使用这个标签有两点一定要注意，一个是value值若是开始不需要设置初始值，value里不要设置任何内容，多个空格都不行，空格会在页面中永远占着一定的位置；另外我们一般不需要textarea自带的右下角装饰效果，设置resize:none;可以样式重置取消

关于弹出模态框的原生开发思路

我说一下大概思维，不复杂。基本思路：弹出一个div,周围的其他事件不可操作，可以固定显示一个窗口

  • 整体的半透明灰色遮幕层；
    首先颜色上面采用rgba（128，128，128，0.7）；
    宽高百分比设置（不能再框架内）
    绝对定位，默认隐藏；
  • 具体的内部窗口；
    固定宽高，margin居中，可以适当加入圆角；

我想起来点关于圆角的事，我们一般为了方便border-radius:2%;里面其实填写几像素更好,意思是在边角上画个以多少像素为半径的圆,多出来的尖角部分删除;

  • 外部激活的按钮 （jquery控制显示）；

角标样式的处理

伪元素基本上我们经常用到比如清除浮动啊，这里我说一下那个发出消息框后指向头像的尖尖角问题

  1. //这是指向右的角标
  2. XXX:after{
  3.     content：'';
  4.     width:0；
  5.     height:0;
  6.     border:10px solid;
  7.     border-color:transparent;
  8.     border-left-color: #ededed;
  9.     display:block;
  10.     //自己随便挑挑位置就行
  11. }
  13. //左角标
  14. XXX：after{
  15.     content:'';
  16.     height:0;
  17.     width:0;
  18.     border:10ps solid transparent;
  19.     border-right-color:#ededed;
  20.     display:block;
  21.       //自己随便挑挑位置就行
  22. }

2018-11-14总结

1、一般我们做多页面管理，样式表会作为外链表引入，项目页面较多时如果不加处理很容易造成样式污染,在导入方法上很讲究：

这样写的css文件中的样式只能在本组件中使用，而不会影响其他组件

  1. ```css
  2. <style src="../../assets/css/home.css" scoped>
  3. </style>
  2. <a name="7c7923b3"></a>
  3. ## 2、一般做电商类帮助信息题材，我们需要对文字边缘对齐处理
  1. text-align: justify;
  2. text-justify: kashida;
  2. <a name="fdb6f5cf"></a>
  3. ## 3、通过伪类来模拟选项卡功能
  1. .cell:hover,
  2. .cell:active > .detail {
  3.   display: block;
  4. }
  2. <a name="b8234830"></a>
  3. ## 4、当某些值相互依赖时，应该把它们的相互关系用代码表达出来。从而尽量减少 改动时要编辑的地方在这个例子中，行高是字号的 1.5 倍。因 此，把代码改成下面这样会更易维护:
  1. font-size: 20px; line-height: 1.5;
  2. <a name="53f45fda"></a>
  3. ## 5、为了避免在不同的浏览器中表现不同盒子模型的情况产生
  5. ```less
  6. ```css
  7. boxing-sizing:content-box\border-box\inherit

content-box说得就是w3c标准的盒模型； border-box说的是IE怪异盒模型(ie6盒子模型) inherit:继承父类的模型形式

  2. <a name="38a46e65"></a>
  3. ## 6、当我们为了账户保密,需要防止自动填充密码,在chrome上较为严重,chrome会自动记录密码,通常我们会在form表单上加入`autocomplete="off"` 或者 在输入框中加入`autocomplete="off"`
  5. <a name="dcfcbc1b"></a>
  6. ## 7、高斯模糊是PS的一种常见的处理技巧，在做移动web，或者是H5项目时，有的UI会要求我们根据用户的头像，做成高斯模糊的头像背景
  1. -webkit-filter: blur(2px);   /* Chrome, Safari, Opera */
  2. filter: blur(2px);

但是当加上字的时候,文字的可读性不高 可在文字书写的图层加入伪类模糊处理

  1. body, main::before {
  2. background: url("tiger.jpg") 0 / cover fixed;
  3. }
  4. main {
  5. position: relative;
  6. background: hsla(0,0%,100%,.3); overflow: hidden;
  7. }
  8. main::before { content: '';
  9. position: absolute;
  10. top: 0; right: 0; bottom: 0; left: 0; filter: blur(20px);
  11. margin: -30px;
  12. }
  2. <a name="a401e346"></a>
  3. ## 8、在项目开发初期，也就是还原UI设计图的过程中，我们经常碰到到处理很多标签的原始固定的样式，虽然可以采用样式覆盖，但是需要我们碰到一个改一个，开发效率并不高，这里推荐采用css3中的一个处理办法效率极高，最佳方案：
  1. div{resize:both;overflow:auto;}

在 CSS3中，resize 属性规定是否可由用户调整元素尺寸,box-sizing 属性允许您以确切的方式定义适应某个区域的具体内容

  2. <a name="15a461cf"></a>
  3. ## 9、最近开发微信小程序项目中，scroll-view标签的使用体验中，在安卓机会出现一个默认的主轴滚动条，针对框架中的一些默认出现的样式，我们一般会采用class父类层级嵌套，或者直接import，但是实测很多场景下并不管用，这里不推荐使用行内标签，这是草莽做法，最佳解决方法，伪类，要善用伪类，伪类非常好用
  1. ::-webkit-scrollbar {
  2. width: 0;
  3. height: 0;
  4. color: transparent;
  5. }
  1. button::after{
  2. border: none;
  3. }

常用的伪类主要是：:link、:visited、:hover、:active，我这有个巧记的方法：L-V-H-A，l(link)ov(visited)e h(hover)a(active)te，即用喜欢和讨厌两个词来概括

  2. <a name="6ddb2451"></a>
  3. ## 9、 我们一般开发PC端项目时，设计师会花很多功夫在网页logo上，那对于我们开发者而言，自己做个博客或者demo展示项目的时候，如何快速转化一般图片来当做我们的logo呢？
  1. 图标的格式可以必须转化成icon；
  2. 网站设计参考（www.logofree.cn/logo.html）;
  3. 图片转化为logo参考
  4. http://www.bitbug.net/ 生成的图标背景是图片的背景，图片如果为透明背景，那么生成的ico图标也是透明的

将生成的ico图标放在自己的项目文件中，然后在header标签中，写下面一句话，例如：

  1. <link rel="shortcut icon" href="/自己的ico文件名.ico"/>
  2. <link rel="shortcut icon" href="/favicon.ico"/>
  2. <a name="98e9caff"></a>
  3. ## 10、不知道大家平时做项目的时候有木有关注这个问题，其实之前做项目遇到过类似的问题，但是因为是单独的chrome浏览器的填充，而且是样式问题稍微严重点，也就没在意。然而在近期的项目中有遇到了这个问题，最为一个新的网站，第一次登陆或是注册就被填充，这个问题，细思极恐.
  5. 在大多数的浏览器中通常我们会在form表单上加入autocomplete="off" 或者 在输入框中加入autocomplete="off"但以上h5新加的方法并不好用,或者说chrome还部证明支持,不过提供了一个新思维,用这个方法能实现,可以加在任意一个你不想被填充的input标签内
  7. ```css
  8. autocomplete="new-password"

这个方法也许还有兼容性的问题,因为这个autocomplete的方法是h5新加的,所以为了效果还需加上私有属性的相关设置

  1.     input:-webkit-autofill,
  2.     input:-webkit-autofill:hover,
  3.     input:-webkit-autofill:focus {
  4.     box-shadow:0 0 0 60px #eee inset;
  5.     -webkit-text-fill-color: #878787;
  6.  }

强迫症们,快来感激我!