Css3 Six Day

writer:late at night codepeasant

学习大纲:

一、其他样式

1、圆角边框

在 CSS3 中,新增了圆角边框样式,这样我们的盒子就可以变圆角了。

border-radius 属性用于设置元素的外边框圆角。

语法:

 border-radius:length;    
  • 参数值可以为数值或百分比的形式

  • 如果是正方形,想要设置为一个圆,把数值修改为高度或者宽度的一半即可,或者直接写为 50%

  • 该属性是一个简写属性,可以跟四个值,分别代表左上角、右上角、右下角、左下角

  • 分开写:border-top-left-radius、border-top-right-radius、border-bottom-right-radius 和border-bottom-left-radius

  • 兼容性 ie9+ 浏览器支持, 但是不会影响页面布局,可以放心使用

2、盒子阴影

CSS3 中新增了盒子阴影,我们可以使用 box-shadow 属性为盒子添加阴影。语法:


box-shadow: h-shadow v-shadow blur spread color inset;

3、文字阴影

在 CSS3 中,我们可以使用 text-shadow 属性将阴影应用于文本。语法:


text-shadow: h-shadow v-shadow blur color;

二、浮动

1、传统网页布局的三种方式

​ CSS 提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序):

  • 普通流(标准流)

  • 浮动

  • 定位

    这三种布局方式都是用来摆放盒子的,盒子摆放到合适位置,布局自然就完成了。

注意:实际开发中,一个页面基本都包含了这三种布局方式(后面移动端学习新的布局方式) 。

2、标准流(普通流/文档流)

所谓的标准流: 就是标签按照规定好默认方式排列

  1. 块级元素会独占一行,从上向下顺序排列。常用元素:div、hr、p、h1~h6、ul、ol、dl、form、table

  2. 行内元素会按照顺序,从左到右顺序排列,碰到父元素边缘则自动换行。常用元素:span、a、i、em 等

以上都是标准流布局,我们前面学习的就是标准流,标准流是最基本的布局方式。

3、为什么需要浮动?

​ 总结: 有很多的布局效果,标准流没有办法完成,此时就可以利用浮动完成布局。 因为浮动可以改变元素标签默认的排列方式.

​ 浮动最典型的应用:可以让多个块级元素一行内排列显示。

​ 网页布局第一准则:多个块级元素纵向排列找标准流,多个块级元素横向排列找浮动

4、什么是浮动?

​ float 属性用于创建浮动框,将其移动到一边,直到左边缘或右边缘触及包含块或另一个浮动框的边缘。

语法:


选择器 { float: 属性值; }

5、浮动特性

加了浮动之后的元素,会具有很多特性,需要我们掌握的.

1、浮动元素会脱离标准流(脱标:浮动的盒子不再保留原先的位置)

2、浮动的元素会一行内显示并且元素顶部对齐

注意:

​ 浮动的元素是互相贴靠在一起的(不会有缝隙),如果父级宽度装不下这些浮动的盒子,多出的盒子会另起一行对齐。

3、浮动的元素会具有行内块元素的特性

​ 浮动元素的大小根据内容来决定

​ 浮动的盒子中间是没有缝隙的

6、浮动元素经常和标准流父级搭配使用

为了约束浮动元素位置, 我们网页布局一般采取的策略是:

​ 先用标准流父元素排列上下位置, 之后内部子元素采取浮动排列左右位置. 符合网页布局第一准侧

三、常见网页布局

浮动布局注意点

1、浮动和标准流的父盒子搭配。

先用标准流的父元素排列上下位置, 之后内部子元素采取浮动排列左右位置

2、一个元素浮动了,理论上其余的兄弟元素也要浮动。

一个盒子里面有多个子盒子,如果其中一个盒子浮动了,其他兄弟也应该浮动,以防止引起问题。

浮动的盒子只会影响浮动盒子后面的标准流,不会影响前面的标准流.

四、清除浮动

1、为什么需要清除浮动?

​ 由于父级盒子很多情况下,不方便给高度,但是子盒子浮动又不占有位置,最后父级盒子高度为 0 时,就会影响下面的标准流盒子。

2、清除浮动本质

清除浮动的本质是清除浮动元素造成的影响:浮动的子标签无法撑开父盒子的高度

注意:

  • 如果父盒子本身有高度,则不需要清除浮动

  • 清除浮动之后,父级就会根据浮动的子盒子自动检测高度。

  • 父级有了高度,就不会影响下面的标准流了

3、清除浮动样式

语法:


选择器{clear:属性值;}

我们实际工作中, 几乎只用 clear: both;

清除浮动的策略是: 闭合浮动.

4、清除浮动的多种方式

4.1、额外标签法

额外标签法也称为隔墙法,是 W3C 推荐的做法。

使用方式:

​ 额外标签法会在浮动元素末尾添加一个空的标签。


例如 <div style="clear:both"></div>,或者其他标签(如<br />等)。

​ 优点: 通俗易懂,书写方便

​ 缺点: 添加许多无意义的标签,结构化较差

​ 注意: 要求这个新的空标签必须是块级元素。

总结:

​ 1、清除浮动本质是?

​ 清除浮动的本质是清除浮动元素脱离标准流造成的影响

​ 2、清除浮动策略是?

​ 闭合浮动. 只让浮动在父盒子内部影响,不影响父盒子外面的其他盒子.

​ 3、额外标签法?

​ 隔墙法, 就是在最后一个浮动的子元素后面添

​ 4、加一个额外标签, 添加 清除浮动样式.

​ 实际工作可能会遇到,但是不常用

4.2、父级添加 overflow 属性

可以给父级添加 overflow 属性,将其属性值设置为 hidden、 auto 或 scroll 。

例如:


overflow:hidden | auto | scroll;

优点:代码简洁

缺点:无法显示溢出的部分

注意:是给父元素添加代码

4.3、父级添加after伪元素

:after 方式是额外标签法的升级版。给父元素添加:


.clearfix:after {  
  content: "";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;  
}
.clearfix {  /* IE6、7 专有 */
  *zoom: 1;
}  

优点:没有增加标签,结构更简单

缺点:照顾低版本浏览器

代表网站: 百度、淘宝网、网易等

4.4、父级添加双伪元素

给父元素添加


.clearfix:before,.clearfix:after {
  content:"";
  display:table;
}
.clearfix:after {
  clear:both;
}
.clearfix {
  *zoom:1;
}  

优点:代码更简洁

缺点:照顾低版本浏览器

代表网站:小米、腾讯等

总结

为什么需要清除浮动?

  1. 父级没高度。

  2. 子盒子浮动了。

  3. 影响下面布局了,我们就应该清除浮动了。

五、PS 切图

1、图层切图


最简单的切图方式:右击图层 → 导出 → 切片。

2、切片切图

2.1、利用切片选中图片


利用切片工具手动划出

2.2、导出选中的图片


文件菜单 → 存储为 web 设备所用格式 → 选择我们要的图片格式 → 存储 。

3、PS插件切图

​ Cutterman 是一款运行在 Photoshop 中的插件,能够自动将你需要的图层进行输出,以替代传统的手工 "导出 web 所用格式" 以及使用切片工具进行挨个切图的繁琐流程。

官网:http://www.cutterman.cn/zh/cutterman

注意:Cutterman 插件要求你的 PS 必须是完整版,不能是绿色版,所以大家需要安装完整版本。

走在深夜的小码农 Sixth Day的更多相关文章

  1. 走在深夜的小码农 Seventh Day

    Css3 Seventh Day writer:late at night codepeasant 学习大纲: 1. 定位(position) 介绍 1.1 为什么使用定位 我们先来看一个效果,同时思 ...

  2. 走在深夜的小码农 Fifth Day

    Css3 Fifth Day writer:late at night codepeasant 学习大纲: 一.css三大特性 1.层叠性 ​ 相同选择器给设置相同的样式,此时一个样式就会覆盖(层叠) ...

  3. 走在深夜的小码农 Fourth Day

    Css3 Fourth Day writer:late at night codepeasant 学习大纲 一.emmet语法 1.简介 ​ Emmet语法的前身是Zen coding,它使用缩写,来 ...

  4. 走在深夜的小码农 Third Day

    Css3 Third Day writer:late at night codepeasant css简介 ​ CSS 是层叠样式表 ( Cascading Style Sheets ) 的简称.​ ...

  5. 走在深夜的小码农 Second Day

    HTML5 Second Day writer:late at night codepeasant 学习大纲 表格 表格的主要作用 表格主要用于显示.展示数据,因为它可以让数据显示的非常的规整,可读性 ...

  6. 带码农《手写Mybatis》进度3:实现映射器的注册和使用

    作者:小傅哥 博客:https://bugstack.cn 沉淀.分享.成长,让自己和他人都能有所收获!

  7. Java注解(1):码农的小秘

    很多码农在写代码的时候不太爱写注释,结果任务一多,时间一长,需求一改,就完全不知道当初自己都干了些啥了.好在现在大多数编程语言都有注释功能,能够在代码里面做一些备注,不至于时间长了忘掉.但这些注释只是 ...

  8. 【整理】待毕业.Net码农就业求职储备

    声明:本文题目来源于互联网,仅供即将从学校毕业的.Net码农(当然,我本人也是菜逼一个)学习之用.当然,学习了这些题目不一定会拿到offer,但是针对就业求职做些针对性的准备也是不错的.此外,除了技术 ...

  9. 关于期权池Option Pools与Vesting:码农创业防身必备法器

    之前又看到饿了么创始人团队纠纷的几篇文章,参考了百科.wiki.36Kr.虎嗅.知乎以及邵亦波老师的文章,对之前一直感兴趣的期权汇编初略总结了下 ,仍觉粗糙,对一些具体操作还是不甚了了,不过感觉在中国 ...

随机推荐

  1. 30种SQL语句优化

    1.'对查询进行优化,应尽量避免全表扫描,首先应考虑在 where 及 order by 涉及的列上建立索引. 2.应尽量避免在 where 子句中使用!=或<>操作符,否则将引擎放弃使用 ...

  2. 给子元素设置margin-top无效果的一种解决方法

    在写一个登陆界面的时候,设置登录按钮的margin-top时出了问题 先是这么写的 <div style="margin-top:30px"> <a style= ...

  3. 剑指Offer(一):二维数组中的查找

    一.前言 刷题平台:牛客网 二.题目 在一个二维数组中,每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整 ...

  4. 步进电机的Arduino库函数

    This library allows you to control unipolar or bipolar stepper motors. To use it you will need a ste ...

  5. 跟我一起学.NetCore之WebApi接口裸奔有风险(Jwt)

    前言 撸码需谨慎,裸奔有风险.经常在一些技术交流群中了解到,还有很多小伙伴的项目中Api接口没有做任何安全机制验证,直接就裸奔了,对于一些临时项目或是个人小项目还好,其余的话,建议小伙伴们酌情考虑都加 ...

  6. Python+Appium自动化测试(10)-TouchAction类与MultiAction类(控件元素的滑动、拖动,九宫格解锁,手势操作等)

    滑动屏幕方法swipe一般用于对页面进行上下左右滑动操作,但自动化过程中还会遇到其他情况,如对控件元素进行滑动.拖拽操作,九宫格解锁,手势操作,地图的放大与缩小等.这些需要针对控件元素的滑动操作,或者 ...

  7. Azure Cosmos DB (三) EF Core 操作CURD

    一,引言 接着上一篇使用 EF Core 操作 Azure CosmosDB 生成种子数据,今天我们完成通过 EF Core 实现CRUD一系列功能.EF Core 3.0 提供了CosmosDB 数 ...

  8. MeteoInfoLab脚本示例:多Y轴图

    数据范围相差比较大的数据序列进行对比的时候多Y轴图就很重要了.MeteoInfoLab中提供了一个twinx函数来根据已有的坐标系(Axes)生成一个新的Axes,这个命令会使得已有的Axes不绘制右 ...

  9. day27 Pyhton 面向对象02 组合

    # 组合 # 什么是组合 : 一个类对象的属性是另外一个类的对象 class Person: def __init__(self,name,sex,hp,mp,ad): self.name = nam ...

  10. C 和 C++ 打起来了!曾今最亲密的伙伴到现今的不爽?

    70年代初,贝尔实验室创建了C语言,它是开发UNIX的副产品.很快C就成为了最受欢迎的编程语言之一.但是对于Bjarne Stroustrup来说,C的表达能力还不够.于是,他在1983年的博士论文中 ...