美文网首页
随手记CSS的一些常用技巧

随手记CSS的一些常用技巧

作者: 大笑_876c | 来源:发表于2018-03-29 17:57 被阅读0次

CSS的四种引入方式
1.style属性 内联style属性
2.style标签 内联标签样式
3.link标签 外联样式
4.@import 在CSS文件中引入另一个CSS文件

利用浮动进行布局时都会有bug,解决办法是给浮动元素的父级元素设置一个clearfix类名。
在CSS中写入如下代码:
.clearfix::after{
content: "";
dispaly: block;
clear: both;
}

块级元素的高度是由其内部文档流元素的高度总和决定的。

当一个内联元素元素加了border边框属性,当页面宽度不够时,边框会另起一行却没有分裂开。
效果如下图:


image.png

当输入一段英文字母过长却没有用空格分开时,浏览器会把它当成一个单词,所以不会拆开它,当页面宽度不够时也不会另起一行。
可以通过CSS设置word-break: break-all;解决这个问题。

内联元素的特性:
1,不能设置width和height;
2,多个行内元素排成一行,直到一行排不下,才会换新一行;
3,只可以设置水平方向的边距,如:margin-left,margin-right,padding-left,padding-right.
内联元素的高度是由建议行高和一些字体的设计得到的,无法确定内联元素的高度。

块级元素不到迫不得已不要设置height属性,会有bug,应该由内部的文档流撑开。
块级元素的width设置100%也会有bug,如果设置了内边距,当前元素就会超出父级元素的宽度。

max-width可以设置最大宽度,当窗口宽度大于最大值时,元素的宽度就是设置的最大值,当缩小窗口小于设置的最大宽度时,会实现自适应的效果。

当给子元素设置绝对定位时,记得给父级元素设置上相对定位。

相关文章

  • 常用的一些 CSS 技巧三

    你可以看看其他常用的 CSS 技巧: 常用的一些 CSS 技巧(一)[https://www.jianshu.co...

  • 随手记CSS的一些常用技巧

    CSS的四种引入方式1.style属性 内联style属性2.style标签 内联标签样式3....

  • 一些css常用的css技巧

    移动端1px实现的方法 .border-1px{ position:relative; } .border-1px...

  • Css常用技巧

    Css常用技巧 1.单行省略

  • CSS 选择器

    CSS 选择器是 CSS 规则集的一部分,它实际上选择要设置样式的内容。 你可以配合着 常用的一些 CSS 技巧(...

  • web前端教程:CSS 布局十八般武艺都在这里了

    CSS布局 布局是CSS中一个重要部分,本文总结了CSS布局中的常用技巧,包括常用的水平居中、垂直居中方法,以及单...

  • 常用的一些 CSS 技巧(一)

    CSS3 中的 counter 使用 counter 属性可将任何元素转换为编号列表。类似于有序列表标签的工作方式...

  • CSS布局与居中

    这篇文章会介绍本人已学会的CSS中常用的左右布局、左中右布局、水平居中方法、垂直居中方法和一些CSS小技巧,如有错...

  • CSS 常用技巧

    1. 事件不响应,事件穿透 2. 文本溢出显示省略号 单行溢出overflow: hidden;text-over...

  • 常用css技巧

    1. 黑白图像 这段代码会让你的彩色照片显示为黑白照片,是不是很酷? img.desaturate { fil...

网友评论

      本文标题:随手记CSS的一些常用技巧

      本文链接:https://www.haomeiwen.com/subject/muqvcftx.html