062 ＜复杂网页＞的一些技巧2

小灰灰 2022-09-08 11:51 111阅读 0赞

### 文章目录 ###

*   *   *   *  首先:以下内容都学自B站尚硅谷课程,链接在此
     *  盒子,浮动
     *   *  设置框的尺寸,圆角,阴影,轮廓
         *  浮动,可以设置水平排列

#### 首先:以下内容都学自B站尚硅谷课程,链接在此 ####

链接在这:  
[Web前端零基础入门HTML5+CSS3基础教程][Web_HTML5_CSS3]

## 盒子,浮动 ##

### 设置框的尺寸,圆角,阴影,轮廓 ###

*  box-sizing: 盒子尺寸

box-sizing: border-box

这样,width,height指定的就是盒子的`内容区 + 内边距padding + 边框border`的总大小了  
默认时,它只是内容区的大小.

*  border-radius: 圆角  
    可以分别指定4个角的圆角

border-radius: 10px 20px 30px 40px;

> 当盒子满足`width=height`时,  
> 设置border-radius为50可以得到一个圆形

*  box-shadow: 阴影

box-shadow: 20px 20px 50px rgba(0,0,0,0.5);

其中,值的含义分别是:

> 向右偏移量, 负值代表向左的偏移量  
> 向下偏移量, 负值代表向上的偏移量  
> 阴影的模糊半径,可不写  
> 阴影的颜色

*  outline: 轮廓

.box:hover{
        
    	outline: 10px red 
    }

用法与`border`一样,效果也差不多. 除了它不会影响框的大小

### 浮动,可以设置水平排列 ###

*  float: 设置水平排列

float: right;

多个元素浮动,可以使元素**在父元素中**横向排列,还可以靠`left`或`right`  
默认值: none,不设置浮动

> 元素设置`浮动`以后,将会从文档流中脱离. 此时`块`不再独占一行,宽度和高度默认都将被内容撑开.`行内元素`设置浮动后会变成块元素,可以设置宽高了.  
> 之后,若`固定元素`加入后,会发生重叠.并且浮动的会呆在上面(有例外,不会覆盖的情况)  
>   
>   
> 为什么能水平布局? `浮动元素`不会覆盖`浮动元素`,也`不会移出`父元素.  
> 浮动元素的`次序固定`,即使憋成两行,后面的`right元素`的也不会上移到前面`left元素`空出的位置  
>   
>   
> 如果`先有固定元素`,则`浮动元素无法上移`,只能再起一行

例外: 先有`浮动`,然后,加入固定的`p{文字}`,会发生文字环绕图片的效果.

[Web_HTML5_CSS3]: https://www.bilibili.com/video/BV1XJ411X7Ud

发表评论取消回复

表情：

评论列表（有 0 条评论，111人围观）

还没有评论，来说两句吧...

相关阅读

相关 google一些鲜为人知的搜索技巧-2

/// 以下内容为网上汇总 // <table> <tbody> <tr> <td><span><strong>要做一个研究人员，而不是一个收藏家!</

快来打我*/ 2022年09月18日 05:49/ 0 赞/ 217 阅读

相关 062 ＜复杂网页＞的一些技巧2

文章目录首先:以下内容都学自B站尚硅谷课程,链接在此盒子,浮动设置框的尺寸,圆角,阴影,轮廓

小灰灰/ 2022年09月08日 11:51/ 0 赞/ 112 阅读

相关 06＜复杂网页＞的一些技巧

文章目录首先:以下内容都学自B站尚硅谷课程,链接在此框设置水平居中设置垂直居中

Bertha 。/ 2022年09月07日 12:10/ 0 赞/ 173 阅读

相关一些有意思的网页

http://blog.csdn.net/carson2005/article/details/8657047 （1）时间管理技师：http://www.gtdli

傷城~/ 2022年08月21日 08:46/ 0 赞/ 201 阅读

相关 Shell的一些技巧

所有技巧在bash中测试通过一、字符串： 1.求字符串长度： STRING="Noah's Ark" \ echo $\{\STRING\} 10 2.截取子字

刺骨的言语ヽ痛彻心扉/ 2022年08月13日 16:50/ 0 赞/ 157 阅读

相关 Yii2一些方法技巧小记

表单验证表单验证，两个参数中至少需要一个： public function rules() { return [

港控/mmm°/ 2022年05月21日 02:28/ 0 赞/ 579 阅读

相关一些技巧

一些技巧 Linux方面设置dns 类似于Windows下的tree指令

桃扇骨/ 2022年05月13日 22:44/ 0 赞/ 248 阅读

相关分享网页加载速度优化的一些技巧？

日期：2013-2-17 来源：[GBin1.com][] [![分享网页加载速度优化的一些技巧？][title.jpg]][title.jpg 1] 不管你是不是相信，

朱雀/ 2022年03月30日 10:45/ 0 赞/ 251 阅读

相关 python爬虫的一些技巧

用python写爬虫程序，入门很快，要进阶从“能用”提升到“用的省心省事”有很多方面需要改进下面是一些技巧总结。 Gzip/deflate支持现在的网页普遍支持gz

灰太狼/ 2022年03月07日 18:06/ 0 赞/ 318 阅读

相关网页布置技巧

实现父div宽高由内部元素撑开: 父div添加属性:overflow:hidden; 子元素定位时，无法撑开父元素，因为此时子元素已脱离文本流实现任意元素垂直水

爱被打了一巴掌/ 2021年07月24日 22:23/ 0 赞/ 359 阅读