CSS教程

CSS进阶 如何实现圆形&半圆；什么是BFC；什么是SEO，title、description、keywords三大标签

本文主要是介绍CSS进阶 如何实现圆形&半圆；什么是BFC；什么是SEO，title、description、keywords三大标签，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

1. CSS实现圆形盒子

设置宽高一致

border-radius属性设置为50%（或者直接设置为宽高的一半）

        div {
            width: 100px;
            height: 100px;
            background-color: pink;
            border-radius: 50%;
        }

2. CSS实现半圆

 border-radius的顺序是 左上 右上 右下 左下 
半圆朝左，右边上下角是圆的，左边上下角的宽度设置为0

div盒子宽度为高度的一半 
本例子中，右上和右下的宽度与高度取50或者100都没问题 

 div {
            width: 50px;
            height: 100px;
            border: 1px solid #000;
            background-color: pink;
            /* border-radius的顺序是 左上 右上 右下 左下 */
            /* 半圆朝左，右边上下角是圆的，左边上下角的宽度设置为0 */
            /* div盒子宽度为高度的一半 */
            /* 右上和右下的宽度与高度取50或者100都没问题 */
            border-radius: 0 100px 100px 0;
        }

3. BFC是什么

块级格式化上下文。是一个独立的运行环境，其中的元素是不受上下文的布局的影响。

BFC的布局规则：

内部的盒子会垂直，一个一个摆放

margin决定内部的盒子的垂直距离，如果是同一个BFC盒子，内margin会重叠

BFC区域不会与浮动的盒子的重叠

---------------------------------等待二次补充

不需要一个个添加类名，修改【background-position】属性即可。

结尾：

学习id： 201903090124-

现在是大三学生，学习到了前后端交互的mysql阶段，如有不对的地方，欢迎指正，一起努力呀。如有转载请注明出处。

参考了文章：什么是BFC？看这一篇就够了_Leon的博客-CSDN博客_bfc

这篇关于CSS进阶 如何实现圆形&半圆；什么是BFC；什么是SEO，title、description、keywords三大标签的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航