笔记来源:尚硅谷Web前端HTML5&CSS3初学者零基础入门全套完整版

盒模型补充及田径场实战

1. 盒子大小

默认情况下,盒子可见框的大小由内容区、内边距和边框共同决定

box-sizing用来设置盒子尺寸的计算方式(设置width和height的作用)

.box {
width: 200px;
height: 200px;
background-color: yellow;
border: 10px red solid;
/* box-sizing: content-box; */
box-sizing: border-box;
}

可选值:

  • content-box 默认值,宽度和高度用来设置内容区的大小

  • border-box 宽度和高度用来设置整个盒子可见框的大小

widthheight指的是内容区、内边距和边框的总大小

2. 轮廓

outline用来设置元素的轮廓线,用法和border一模一样

轮廓和边框不同点是,轮廓不会影响到可见框的大小

边框

.box {
width: 200px;
height: 200px;
background-color: yellow;
border: 10px red solid;
}

轮廓

.box {
width: 200px;
height: 200px;
background-color: yellow;
outline: 10px red solid;
}

可以很明显看到outlineborder的区别

我们一般不会直接这么设置轮廓,而是下面这种场景

.box:hover {
outline: 10px red solid;
}

从上面的动态图也可以很清晰地看出,outline属性并没有改变盒子的布局

3. 阴影

box-shadow属性用于在一个元素的框架周围添加阴影效果

你可以设置多个由逗号分隔的效果

一个盒状阴影由相对于元素的X和Y的偏移量、模糊和扩散半径以及颜色来描述

box-shadow用来设置元素的阴影效果,阴影不会影响页面布局

.box {
width: 200px;
height: 200px;
background-color: yellow;
box-shadow: 10px 10px orange;
}

box-shadow: 10px 10px 5px orange;

box-shadow: 10px 10px 5px rgba(0, 0, 0, .2);

  • 第一个值-水平偏移量:设置阴影的水平位置

    • 正值向右移动
    • 负值向左移动
  • 第二个值-垂直偏移量:设置阴影的垂直位置
    • 正值向下移动
    • 负值向上移动
  • 第三个值-阴影的模糊半径
  • 第四个值-阴影的颜色

4. 圆角

border-radius属性使一个元素的外边框边缘的角变圆

你可以设置一个半径来做圆角,或者设置两个半径来做椭圆角

border-radius 用来设置圆角,圆角设置的是圆的半径大小

  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-left-radius
  • border-bottom-right-radius
border-radius: 20px;

border-top-right-radius: 50px 100px;

border-radius 可以分别指定四个角的圆角

  • 四个值:左上 右上 右下 左下
  • 三个值:左上 右上/左下 右下
  • 两个值:左上/右下 右上/左下
  • 一个值:左上/右上/右下/左下

这里同样不需要死记硬背,只要记住遵循顺时针方向和矩形中心点对称原则

border不同的是,border是从开始顺时针设置,而圆角是从左上开始

原理很简单,就是绘制正方形,并将四个圆角半径设置为正方形的一半

.box {
width: 200px;
height: 200px;
background-color: yellow;
border-radius: 50%;
}

椭圆

只需要对上述样式对一点点的改动,设置widthheight属性不相等即可

.box {
width: 300px;
height: 200px;
background-color: yellow;
border-radius: 50%;
}

【Web前端HTML5&CSS3】08-盒模型补充的更多相关文章

  1. 【Web前端HTML5&CSS3】06-盒模型

    笔记来源:尚硅谷Web前端HTML5&CSS3初学者零基础入门全套完整版 目录 盒模型 1. 文档流(normalflow) 2. 块元素 3. 行内元素 4. 盒子模型 盒模型.盒子模型.框 ...

  2. 【Web前端HTML5&CSS3】11-定位

    笔记来源:尚硅谷Web前端HTML5&CSS3初学者零基础入门全套完整版 目录 定位的简介 1. 相对定位 偏移量(offset) 相对定位的特点 2. 绝对定位 绝对定位的特点 包含块(co ...

  3. 【Web前端HTML5&CSS3】03-字符实体与语义标签

    笔记来源:尚硅谷Web前端HTML5&CSS3初学者零基础入门全套完整版 目录 字符实体与语义标签 1. 字符实体 2. meta标签 3. 语义标签 4. 块元素与行内元素 块元素(bloc ...

  4. 【Web前端HTML5&CSS3】05-样式继承与其他概念

    笔记来源:尚硅谷Web前端HTML5&CSS3初学者零基础入门全套完整版 目录 样式继承与其他概念 1. 继承 2. 选择器的权重 3. 长度单位 像素 屏幕分辨率 图像分辨率 百分比 em ...

  5. 【Web前端HTML5&CSS3】12-字体

    笔记来源:尚硅谷Web前端HTML5&CSS3初学者零基础入门全套完整版 目录 字体 1. 字体相关的样式 2. font-family 3. 几种字体 手写体 艺术体 乱码字体 中文字体 4 ...

  6. Web前端:2、盒模型的组成

    在HTML中,若想要实心划分区域,则:1.添加标签:2.对标签设置尺寸(宽高) 但只要是添加了一个元素(标签),就会在页面中生成一个盒子,不同元素产生的盒子模型可能不同,这取决于它CSS的displa ...

  7. CSS3弹性盒模型flexbox布局基础版

    原文链接:http://caibaojian.com/using-flexbox.html 最近看了社区上的一些关于flexbox的很多文章,感觉都没有我这篇文章实在,最重要的兼容性问题好多人都没有提 ...

  8. css3基础教程:CSS3弹性盒模型

    今天给大家分享一篇关于CSS3基础教程 文章,主要是讲CSS3弹性盒模型.弹性布局的主要思想是让容器有能力来改变项目的宽度和高度,以填满可用空间(主要是为了容纳所有类型的显示设备和屏幕尺寸)的能力. ...

  9. CSS3弹性盒模型布局模块介绍

    来源:Robert’s talk原文:http://robertnyman.com/2010/12/02/css3-flexible-box-layout-module-aka-flex-box-in ...

随机推荐

  1. .net core 和 WPF 开发升讯威在线客服系统【私有化部署免费版】发布

    希望 .net 和 WPF 技术时至今日,还能有一些存在感. 这个项目源于2015年前后,当时开发的初版,我使用了 ASP.NET MVC 做为后端,数据库使用原生 ADO.NET 进行操作.WPF ...

  2. Android Studio 上传本地项目到 GitHub 上

    •准备工作 注册 GitHub 账号 [GitHub官网] [视频教程] 安装 Git [官方链接] [极速下载链接] 创建本地代码仓库 在桌面上,鼠标右击,选择  Git Bash Here : 接 ...

  3. Android Studio 之 在活动中使用 Toast

    •简介 Toast 是 Android 系统提供的一种非常好的提醒方式: 在程序中可以使用它将一些短小的信息通知给用户: 这些信息会在一段时间内自动消失,并且不会占用任何屏幕空间 •Toast.mak ...

  4. Android Studio 之 制作 Nine-Patch 图片(.9图片)

    •引言 9.png 可以保证图片在合适的位置进行局部拉伸,避免了图片全局缩放造成的图片变形问题. 但是由于Android Studio对于.9图片的检查更加严格,所以不符合AS要求的.9图片会带来很多 ...

  5. Android Studio 有关 RecycleView 的使用

    •导入相关包 右击File->Project Structure: 搜索  com.android.support: 找到 recyclerview: 导入好后 Sync Now 同步一下,到这 ...

  6. 最小生成树,Prim和Kruskal的原理与实现

    文章首先于微信公众号:小K算法,关注第一时间获取更新信息 1 新农村建设 大清都亡了,我们村还没有通网.为了响应国家的新农村建设的号召,村里也开始了网络工程的建设. 穷乡僻壤,人烟稀少,如何布局网线, ...

  7. 热更新解决方案--xlua学习笔记

    一.热更新方案简介 在Unity游戏工程中,C#代码(编译型语言)资源和Resources文件夹下的资源打包后都不可以更改,因此这部分内容不能进行热更新,而lua代码(解释型语言)逻辑不需要进行预编译 ...

  8. 下拉框动态显示options遇到的问题

    百度后发现,目前资源比较多的就是layui和bootstrap这两种框架了,我是用的bootstrap-select,不知道为啥使用layui的formselect,引入css和js文件后,在sele ...

  9. 字符串转成KB,MB, GB

    import java.text.DecimalFormat; public class SizeUtil { public static String GetImageSize(String ima ...

  10. Day13_70_join()

    join() 方法 * 合并线程 join()线程合并方法出现在哪,就会和哪个线程合并 (此处是thread和主线程合并), * 合并之后变成了单线程,主线程需要等thread线程执行完毕后再执行,两 ...