CSS阶段总结

daryl 发布于2019-08-30 15:54 / 1357人阅读

摘要：布局之左右布局与左中右布局方法为子元素设置浮动，然后在其父元素上使用类来清除浮动。

CSS布局之左右布局与左中右布局

方法：为子元素设置浮动，然后在其父元素上使用clearfix类来清除浮动。代码示例：

html部分：

  a
  b
  c


CSS部分：
.child{
  float: left;
}
.clearfix::after {
    display: block;
    content: "";
    clear: both;
}

水平居中 子元素为内联元素、单个块状及多级块状元素布局方案不同，具体总结如下：

内联元素：对父元素设置text-align: center；

单个块状元素：对子元素设置margin: 0 auto;

多个块状元素：有三种方式
a、子元素全部设置为display: inline-block;，父元素设置为text-align: center；
b、flex布局，父元素display: flex; justify-content: center;
c、如果是在多行各自居中，直接给子元素设置margin: 0 auto;

垂直居中 子元素为单行内联、多行内联及块状元素布局方案不同，具体总结如下：

单行内联元素：父元素高度一定，设置line-height等于height

多行内联元素：父元素设置：display: table-cell; vertical-align: middle;

块状元素：1、固定高度的块级元素：通过绝对定位元素距离顶部50%，并设置margin-top为向上偏移元素高度的一半

        2、未知高度的块级元素：借助CSS3中的`transform`属性向Y轴反向偏移50%的方法来实现

一些小技巧

合理使用伪元素

a标签去掉其默认样式时，颜色可设置为继承父元素a{color:inherit;}

合理使用max-width属性

idc机房托管私有云七大阶段阶段三个阶段 webrtc阶段

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/117113.html

关于Html+css阶段学习总结

摘要：再之后，通过专业老师的指导，开始进行前端知识的全面及系统性的学习。而这篇文章便是对这次学习的一次阶段性总结。的学习并不是太难，也可以说是很容易，但千里之行，这才刚刚开始，熟练的掌握，还需要不断的练习。一、学习经历进入大学不久，就加入了社团，从而对前端有了一个初步的了解，之后也做过一些学校的官网，积累了一些微小的经验。到了大二的时候，学校开设了专门的html+css课程，从中也学到...

CoXie 2019-08-30 14:21 评论0 收藏0
关于Html+css阶段学习总结

摘要：再之后，通过专业老师的指导，开始进行前端知识的全面及系统性的学习。而这篇文章便是对这次学习的一次阶段性总结。的学习并不是太难，也可以说是很容易，但千里之行，这才刚刚开始，熟练的掌握，还需要不断的练习。一、学习经历进入大学不久，就加入了社团，从而对前端有了一个初步的了解，之后也做过一些学校的官网，积累了一些微小的经验。到了大二的时候，学校开设了专门的html+css课程，从中也学到...

Rindia 2019-08-02 10:06 评论0 收藏0
前端培训-中级阶段（8）- jQuery元素属性样式操作（2019-08-01期）

摘要：前端最基础的就是。对应，是标签的属性。获取匹配元素相对父元素的偏移。返回的对象包含两个整型属性和。一组包含作为动画属性和终值的样式属性和及其值的集合动画的额外选项。指示是否在效果队列中放置动画。前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，...

everfly 2019-08-02 15:30 评论0 收藏0
前端培训-中级阶段（8）- jQuery元素属性样式操作（2019-08-01期）

摘要：前端最基础的就是。对应，是标签的属性。获取匹配元素相对父元素的偏移。返回的对象包含两个整型属性和。一组包含作为动画属性和终值的样式属性和及其值的集合动画的额外选项。指示是否在效果队列中放置动画。前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，...

bang590 2019-08-30 11:21 评论0 收藏0
前端培训-中级阶段（8）- jQuery元素属性样式操作（2019-08-01期）

摘要：前端最基础的就是。对应，是标签的属性。获取匹配元素相对父元素的偏移。返回的对象包含两个整型属性和。一组包含作为动画属性和终值的样式属性和及其值的集合动画的额外选项。指示是否在效果队列中放置动画。前端最基础的就是 HTML+CSS+Javascript。掌握了这三门技术就算入门，但也仅仅是入门，现在前端开发的定义已经远远不止这些。前端小课堂（HTML/CSS/JS），本着提升技术水平，...

james 2019-08-23 18:34 评论0 收藏0