前端学习之CSS第三天

一、圆角边框

border-radius

圆形：正方形的盒子是圆形，长方形的盒子是椭圆

boder-radius：50%

圆角矩形：高度或者是宽度的一半

border-radius: 高或宽的一半

设置不同的圆角

border-radius：10px 20px 30px 40px; 左上，右上，右下，左下

二、盒子阴影

盒子的阴影不会影响盒子的大小

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

值	描述
h-shadow	水平移动的距离
v-shadow	垂直移动的距离
blur	阴影的模糊程度
spread	阴影的大小
color	阴影的的颜色
inset	默认的内部阴影

文字阴影

text-shadow: h-shadow v-shadow blue color

值	描述
h-shadow	水平移动的距离
v-shadow	垂直移动的距离
blur	阴影模糊的程度
color	阴影的颜色

三、浮动

1.网页布局三种传统布局方式：标准流、浮动、定位

标准流

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

比如说：1.块级元素会独占一行，从上到下来排列。常用的元素有：div、hr、p、h1-h6、ul、ol、dl、form、table

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

以上都是标准流的布局，标准流就是最基本的布局方式

浮动

有许多的布局效果，标准流没有办法来完成，此时就可以利用浮动完成布局。

因为浮动可以改变标签默认的排列方式。

{folat:属性值 }

属性值	描述
none	元素不浮动
left	元素像左浮动
right	元素像右浮动

浮动的特性

1.浮动的元素会脱离标准流（脱标：浮动的盒子不在保留原来的位置）

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

3.浮动的元素会具有行内块元素的特性、浮动元素的大小会根据内容来决定、浮动的盒子中间是没有缝隙的

浮动元素的布局特点

一个元素浮动了，后面的其他元素也要跟着浮动。

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

清除浮动

由于父级元素在页面的布局中，不方便给高度，但是子盒子浮动后有不占位置，所以当父盒子高度为0的时候，就会影响下面的标准流的盒子。

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

注意：1.如果父盒子有高度则不需要清除浮动

2 .清除浮动后，父级会根据浮动的子盒子自动检测高度

3.父级有了高度，就不会影响后面的标准流

清除浮动的方式：

1.额外标签法（又叫做隔墙法）：

在浮动元素的末尾添加一个空标签

<div style="clear:both"> </div或者是其他的标签

2.给父元素添加 overflow属性

overflow:hidden

3.给父元素添加after伪元素

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

4.给父级添加双伪元素

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

前端学习之CSS第三天相关推荐

前端学习之 CSS（三）
九:浮动浮动是css里面布局最多的一个属性,也是很重要的一个属性. float:表示浮动的意思. 属性值: none: 表示不浮动,默认 left: 表示左浮动 right:表示右浮动例: htm ...
web前端学习中CSS，JS代码压缩
web前端要学习的知识有很多,前端基础要学习三个部分:HTML,CSS,JavaScript(简称JS),因此首先明确三个概念:HTML负责结构,网页想要表达的内容由html书写. CSS负责样式,网 ...
【前端学习】CSS入门
前端学习:CSS入门文章目录前端学习:CSS入门前言 1.class01 1.我的第一个CSS 2.导入方式 3.基本选择器 (1)ID选择器 (2)标签选择器 (3)类选择器 4.层次选择器 ...
Web前端学习之 CSS基础二
Web前端学习之 CSS基础二 1. 2. 主体 3. 完整代码如下所示 4. 结束语 1. /* 权重是0 */* {font-size: 35px;text-align: center;color ...
(:◎)≡前端学习之CsS篇
前端学习之CSS篇 1.CSS简介 2.CSS语法规范 3.CSS选择器 (1)标签选择器 (2)类选择器 (3)id选择器 (4)通配符选择器 (5)选择器总结 4.CSS字体属性 5.CSS文本属 ...
python前端学习之css
01-css的引入方式在HTML中引入css方式总共有三种: 行内样式内接样式外接样式 3.1 链接式 3.1 导入式 css介绍现在的互联网前端分三层: HTML:超文本标记语言.从语义的角 ...
外部导入方式添加背景图_web前端基础：CSS的三种导入方式说明
随着html的成长,为了满足页面设计者的要求,HTML添加了很多显示功能.但是随着这些功能的增加,HTML变得越来越杂乱,而且HTML页面也越来越臃肿.于是css便诞生了. Web前端基础教程,Web ...
前端学习之CSS快速入门-2021-09-20~22
CSS快速入门什么是CSS 如何学习 csst是什么 CSS怎么用(快速入门) CSS选择器(重点+难点) 美化网页(文字,阴影,超链接,列表,渐变-) 盒子模型浮动定位网页动画(特效效果) ...
web前端学习day_02:CSS:三种使用方式/选择器/颜色/背景图片/查看样式/文本/元素显示方式/盒子模型/定位方式/行内对齐/显示层级/防溢出
CSS : Cascading Style Sheet 层叠样式表. 作用: 美化页面 CSS 如何在html页面中添加css样式代码?总共有三种方式: 1.选择器 2.选择器练习: 3.颜色赋值 4 ...

前端学习之CSS第三天

前端学习之CSS第三天相关推荐

最新文章

热门文章