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 点赞
Day7:html和css的更多相关文章
- Matplotlib数据可视化(3):文本与轴
在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...
- CSS的未来
仅供参考 前言 完成<CSS核心技术与实战>这本书,已有一个多月了,而这篇文章原本是打算写在那本书里面的,但本章讲解的内容,毕竟属于CSS未来的范畴,而这一切都还不能够确定下来,所以这一章 ...
- 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧
记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...
- 前端css兼容性与易混淆的点
一.常用的骨灰级清除浮动 .clearfix:after { content: "."; display: block; height:; clear: both; visibil ...
- 理解CSS外边距margin
前面的话 margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有 ...
- 理解CSS视觉格式化
前面的话 CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应 ...
- 谈谈一些有趣的CSS题目(十二)-- 你该知道的字体 font-family
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之第二章:利用模型类创建视图、控制器和数据库
在这一章中,我们将直接进入项目,并且为产品和分类添加一些基本的模型类.我们将在Entity Framework的代码优先模式下,利用这些模型类创建一个数据库.我们还将学习如何在代码中创建数据库上下文类 ...
- 谈谈一些有趣的CSS题目(十一)-- reset.css 知多少?
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
随机推荐
- xmltodict 模块
pip install xmltodict xmltodict.parse() 方法可以将xml数据转为python中的dict字典数据 xmltodict.unparse() 将字典转换为xml数据 ...
- IEnumerable对象的Distinct方法重写
public static IEnumerable<TSource> DistinctBy<TSource, TKey>(this IEnumerable<TSource ...
- Debian图形界面与字符界面之间的切换
图形界面切换字符界面 原文出自:https://www.cnblogs.com/qingkai/p/5443572.html 因为不能评论所以摘录过来 第一步: vi /etc/default/gru ...
- sort 对多列进行排序
sort -t '\t' -k 3,3 -k 2,2 文件名 # 先对第三列进行排序,然后再对第二列进行排序
- Handler processing failed; nested exception is java.lang.NoSuchMethodError: org.apache.commons.codec.digest.DigestUtils.sha1Hex(Ljava/lang/String;)Ljava/lang/String;
异常:Handler processing failed; nested exception is java.lang.NoSuchMethodError: org.apache.commons.co ...
- hive插入数据-单条
写入数据到hive的hdfs文件中即可,hive创建表的时候用小写做表名,不然查不到 相关操作如下: 查看目录与表 hive> dfs -ls /user/hive/warehouse/ 准备h ...
- mac mysql5.7.17修改root初始密码(知道初始密码)
最近在mac上装个mysql可以说是麻烦死了,在这里就说说修改初始密码吧! 刚开始的时候不知道怎么修改,于是上网百度,网上几乎都是说要先执行命令mysqld_safe --skip-grant-tab ...
- windows10系统安装Oralce11g时遇到INS-13001环境不满足最低要求
升级win10系统之后,需要重新安装Oracle,因为在安装Oralce11g时,使用64位的会出现各种不兼容问题,我每次安装都是使用32位的数据库. 在安装时点击setup.exe之后,出现了:[I ...
- ffmpeg 推流相关指令
1.rtsp->rtsp(只解封装,不解码) ffmpeg -re -rtsp_transport tcp -i rtsp://usr:passwd@ip:port/h264/ch1/sub/a ...
- MFC中添加控制台输出
可以在CWinApp的InitInstance()中调用下面的函数,以生成控制台: #include <io.h> #include <fcntl.h> void InitCo ...