Day7:html和css

Day7:html和css

如果有浮动,会导致脱标,定位也能脱标,我们没有清除浮动,因为里面有子绝父相.

清除浮动的方法

额外标签法,在最后一个浮动元素后面添加一个空的标签代码:

<div style="clear: both"></div>

使用after伪元素进行清除浮动.

.clearfix:after {content: "";display: block;height: 0;clear: both;visibility: hidden;
}
.clearfix {*zoom: 1;
}

进行双伪元素清除浮动

.clearfix:before, clearfix:after {content: "";display: table;// 可以清除浮动
}
.clearfix:after {clear:both;
}
.clearfix {*zoom: 1;
}

好记性不如敲烂键盘

vertical-align垂直对齐

显示和隐藏

display visibility overflow

dispaly:none;
display:block;

dispaly: block;
dispaly: inline;
dispaly: none;

// dispaly: none; 隐藏元素
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Demo</title><style>div {width: 200px;height: 200px;background-color: pink;// dispaly: block显示// dispaly: none; 隐藏/*visibility: visible;  显示某个元素*/visibility: hidden; // 隐藏元素}p {width: 200px;height: 400px;background-color: purple;}</style>
</head>
<body><div></div><p>达叔小生</p>
</body>
</html>

使用dispaly: none后隐藏对象,不保留位置.

visibility

visibility: inherit | visible | collapse | hidden

vertical-align垂直对齐针对行内块元素.

vertical-align: baseline | top | middle | bottom

overflow

overflow: visible | auto | hidden | scroll

cursor鼠标样式:

cursor: move;

<ul><li style="cursor: default"> 我是达叔 </li><li style="cursor: pointer"> 小手 </li><li style="cursor: move">  移动 </li><li style="cursor: text"> 文本 </li>
</ul>

轮廓outline

outline: none;
outline: outline-color || outline-style || outline-width<textarea name="" id="" cols="30" rows="10">
</textarea>

resize防止拖拽文本域

resize: none

<textarea style="resize: none;"></textarea>

vertical-align垂直对齐

margin: 0 auto;

vertical-align: baseline;

white-space设置

text-overflow文字溢出

text-overflow: clip | ellipsis
clip: 不显示省略标记(...)
ellipsis: 当对象内文本溢出,显示(....)

盒子模型（`CSS`重点）

三个大模块：盒子模型、浮动、定位

盒子边框（border）

border : border-width || border-style || border-color

none：没有边框即忽略所有边框的宽度（默认值）
solid：边框为单实线(最为常用的)
dashed：边框为虚线
dotted：边框为点线
double：边框为双实线

border-top: 1px solid red; /*上边框*/
border-bottom: 2px solid green; /*下边框*/
border-left: 1px solid blue;
border-right: 5px solid pink;

表格的细线边框

table{ border-collapse:collapse; }
collapse 单词是合并的意思border-collapse:collapse;
表示相邻边框合并在一起。

内边距（`padding`）

padding属性用于设置内边距。

padding-top:上内边距padding-right:右内边距padding-bottom:下内边距padding-left:左内边距

外边距（`margin`）

margin属性用于设置外边距。

margin-top:上外边距
margin-right:右外边距
margin-bottom:下外边距
margin-left:上外边距
margin:上外边距 右外边距  下外边距  左外边

外边距实现盒子居中

.header{ width:960px; margin:0 auto;}
文字水平居中 text-align: center
子水平居中  左右margin 改为 auto

清除元素的默认内外边距

* {padding:0;         /* 清除内边距 */margin:0;          /* 清除外边距 */
}

外边距合并

使用margin定义块元素

overflow:hidde

`content`宽度和高度

宽度属性width和高度属性height

圆角边框(`CSS3`)

border-radius: 50%;

盒子阴影(`CSS3`)

box-shadow:水平阴影 垂直阴影 模糊距离（虚实）  阴影尺寸（影子大小）  阴影颜色  内/外阴影；
box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4);

浮动(`float`)

选择器{float:属性值;}

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

清除浮动本质

选择器{clear:属性值;}   clear 清除

属性值	描述
`left`	清除左侧浮动的影响
`right`	清除右侧浮动的影响
`both`	同时清除左右两侧浮动的影响

额外标签法

clear:both
<div style=”clear:both”></div>// 父级添加overflow属性方法
给父级添加： overflow为 hidden|auto|scroll  都可以实现

使用`after`伪元素清除浮动

 .clearfix:after {  content: ""; display: block; height: 0; clear: both; visibility: hidden;  }   .clearfix {*zoom: 1;}// 使用before和after双伪元素清除浮动.clearfix:before,.clearfix:after { content:"";display:table;
}
.clearfix:after {clear:both;
}
.clearfix {*zoom:1;
}

元素的显示与隐藏

display 显示
display : none 隐藏对象
display:block visibility 可见性
visible : 　对象可视
hidden : 　对象隐藏overflow 溢出
visible : 不剪切内容也不添加滚动条。
auto :超出自动显示滚动条，不超出不显示滚动条
hidden : 不显示超过对象尺寸的内容，超出的部分隐藏掉
scroll : 不管超出内容否，总是显示滚动条

鼠标样式`cursor`

cursor :  default  小白 | pointer  小手  | move  移动  |  text  文本

轮廓 `outline`

outline : outline-color || outline-style || outline-width// outline: 0;   或者  outline: none;

防止拖拽文本域`resize`

<textarea  style="resize: none;"></textarea>

`vertical-align` 垂直对齐

margin: 0 auto;
text-align: center;
vertical-align 垂直对齐
vertical-align : baseline |top |middle |bottom

溢出的文字隐藏

white-space
normal : 　默认处理方式
nowrap : 　强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。text-overflow 文字溢出
text-overflow : clip | ellipsis
clip : 　不显示省略标记（...），而是简单的裁切
ellipsis : 　当对象内文本溢出时显示省略标记

如果看了觉得不错

点赞！转发！

达叔小生：往后余生，唯独有你
You and me, we are family !
90后帅气小伙，良好的开发习惯；独立思考的能力；主动并且善于沟通
简书博客：达叔小生
https://www.jianshu.com/u/c785ece603d1

结语

下面我将继续对其他知识深入讲解，有兴趣可以继续关注
小礼物走一走 or 点赞

转载于:https://www.cnblogs.com/dashucoding/p/10196643.html

Day7:html和css相关推荐

css网格_快活的Gridmas！使用CSS网格构建喜庆的日历
css网格在本教程中,我们将使用CSS Grid,SVG和一些节日的欢呼声来构建季节性出现日历! 让我们先看一下我们将要朝着什么方向前进-单击日期以查看其背后的内容: 您需要什么本教程实际上并不需 ...
CSS部分学习（尚硅谷视频教程达姆老师）
CSS部分学习 css部分 day1 day2 day3 day4 day5 day6 day7 day8 css部分 day1 1.Cascading style sheets2.样式表的组成规则选 ...
ireport如何给static text加边框_html amp;amp; css 解决li浮动边框为2的问题
html && css 解决li浮动边框为2的问题思路问题:首先,li 浮动后,添加边框,则中间 li 的边框会形成 1+1=2 的效果,1px的边框会变成2px.(例:分页模块 ...
【css】基础学习总结
填充部分: 1.css概念 2.如何用css控制页面样式(2种方式,写在页面内,链接CSS样式文件) 3.介绍了不同的选择器(3种) 4.选择器的声明:集体,嵌套 5.css继承:父子嵌套继承 6.C ...
Conversion error:Jekyll::Converters::Scss encountered an error while converting css/main.scss
错误描述:Conversion error: Jekyll::Converters::Scss encountered an error while converting 'css/main.scss ...
CSS 选择器：BeautifulSoup4解析器
和 lxml 一样,Beautiful Soup 也是一个HTML/XML的解析器,主要的功能也是如何解析和提取 HTML/XML 数据. lxml 只会局部遍历,而Beautiful Soup 是基 ...
CSS Modules
css-loader 提供了一种叫做 CSS Modules 的方案,可以帮我们自动生成唯一的类名,不会和其他模块的命名出现冲突要使用 CSS Modules 有几个步骤,首先需要在 webpack ...
css 伪元素::after与::before的使用
CSS伪元素是用来添加一些选择器的特殊效果. 一般使用是类或者id::after , 类或者id::before ::after是在类的后面处理逻辑 ::before 是在先的前面处理逻辑它们都 ...
前端之css基础学习（更正版）
css是什么 CSS是Cascading Style Sheets的简称,中文称为层叠样式表,用来控制网页数据的表现,可以使网页的表现与数据内容分离. 简单的说css的引入就是为了使得HTML语言能够 ...

Day7:html和css

清除浮动的方法

盒子模型（`CSS`重点）

盒子边框（border）

表格的细线边框

内边距（`padding`）

外边距（`margin`）

外边距实现盒子居中

清除元素的默认内外边距

外边距合并

`content`宽度和高度

圆角边框(`CSS3`)

盒子阴影(`CSS3`)

浮动(`float`)

清除浮动本质

额外标签法

使用`after`伪元素清除浮动

元素的显示与隐藏

鼠标样式`cursor`

轮廓 `outline`

防止拖拽文本域`resize`

`vertical-align` 垂直对齐

溢出的文字隐藏

结语

Day7:html和css相关推荐

最新文章

热门文章

Day7:html和css

清除浮动的方法

盒子模型（CSS重点）

盒子边框（border）

表格的细线边框

内边距（padding）

外边距（margin）

外边距实现盒子居中

清除元素的默认内外边距

外边距合并

content宽度和高度

圆角边框(CSS3)

盒子阴影(CSS3)

浮动(float)

清除浮动本质

额外标签法

使用after伪元素清除浮动

元素的显示与隐藏

鼠标样式cursor

轮廓 outline

防止拖拽文本域resize

vertical-align 垂直对齐

溢出的文字隐藏

结语

Day7:html和css相关推荐

最新文章

热门文章

盒子模型（`CSS`重点）

内边距（`padding`）

外边距（`margin`）

`content`宽度和高度

圆角边框(`CSS3`)

盒子阴影(`CSS3`)

浮动(`float`)

使用`after`伪元素清除浮动

鼠标样式`cursor`

轮廓 `outline`

防止拖拽文本域`resize`

`vertical-align` 垂直对齐