随手记CSS的一些常用技巧

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可以设置最大宽度,当窗口宽度大于最大值时,元素的宽度就是设置的最大值,当缩小窗口小于设置的最大宽度时,会实现自适应的效果。

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

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,805评论 1 92
  • 1. 前言 前端圈有个“梗”:在面试时,问个css的position属性能刷掉一半人,其中不乏工作四五年的同学。在...
    YjWorld阅读 4,543评论 5 15
  • 本课来自http://www.imooc.com/learn/9请不要用作商业用途。 HTML5 HTML介绍 H...
    PYLON阅读 3,318评论 0 5
  • 一、 这个话题对我来说有点大了。 我既不是什么心理学家、社会学家、历史学家,也没做过什么深入调研,也没查阅过什么书...
    时光勿念阅读 358评论 0 2
  • 今天我们一起分享的书叫《小狗钱钱的人生整理术》。作者 [德] 博多·舍费尔阐明了真正的赢家养成法则的关键在于行动。...
    宁静致远hfm阅读 116评论 0 2