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的更多相关文章

  1. Matplotlib数据可视化（3）：文本与轴

      在一幅图表中,文本.坐标轴和图像的是信息传递的核心,对着三者的设置是作图这最为关心的内容,在上一篇博客中虽然列举了一些设置方法,但没有进行深入介绍,本文以围绕如何对文本和坐标轴进行设置展开(对图像 ...

  2. CSS的未来

    仅供参考 前言 完成<CSS核心技术与实战>这本书,已有一个多月了,而这篇文章原本是打算写在那本书里面的,但本章讲解的内容,毕竟属于CSS未来的范畴,而这一切都还不能够确定下来,所以这一章 ...

  3. 前端极易被误导的css选择器权重计算及css内联样式的妙用技巧

    记得大学时候,专业课的网页设计书籍里面讲过css选择器权重的计算:id是100,class是10,html标签是5等等,然后全部加起来的和进行比较... 我只想说:真是误人子弟,害人不浅! 最近,在前 ...

  4. 前端css兼容性与易混淆的点

    一.常用的骨灰级清除浮动 .clearfix:after { content: "."; display: block; height:; clear: both; visibil ...

  5. 理解CSS外边距margin

    前面的话   margin是盒模型几个属性中一个非常特殊的属性.简单举几个例子:只有margin不显示当前元素背景,只有margin可以设置为负值,margin和宽高支持auto,以及margin具有 ...

  6. 理解CSS视觉格式化

    前面的话   CSS视觉格式化这个词可能比较陌生,但说起盒模型可能就恍然大悟了.实际上,盒模型只是CSS视觉格式化的一部分.视觉格式化分为块级和行内两种处理方式.理解视觉格式化,可以确定得到的效果是应 ...

  7. 谈谈一些有趣的CSS题目（十二）-- 你该知道的字体 font-family

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

  8. ASP.NET MVC with Entity Framework and CSS一书翻译系列文章之第二章：利用模型类创建视图、控制器和数据库

    在这一章中,我们将直接进入项目,并且为产品和分类添加一些基本的模型类.我们将在Entity Framework的代码优先模式下,利用这些模型类创建一个数据库.我们还将学习如何在代码中创建数据库上下文类 ...

  9. 谈谈一些有趣的CSS题目（十一）-- reset.css 知多少？

    开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...

随机推荐

  1. 为什么23种设计模式没有 MVC

    MVC的是为了把数据(Model)和视图(View)分离开来,然后用控制器(Controller)来粘合M和V之间的关系. MVC是观察者模式(Observer), 策略模式(Strategy)和组合 ...

  2. HDU1060

    #include <bits/stdc++.h> using namespace std; int main() { int n; long long x; double t,ans; c ...

  3. 一次HTTP请求响应涉及了哪些？

    HTTP请求和响应步骤 TCP/IP协议 TCP三次握手 HTTP协议 HTTP请求报文 HTTP响应报文 TCP四次挥手 HTTP请求和响应步骤 以上完整表示了HTTP请求和响应的7个步骤,下面从T ...

  4. zabbix监控配置与邮件告警

    添加主机与主机组 进入web页面,在 配置-主机群组,创建主机群组 在 配置-主机,新建主机 在可见的名称中建议填写为类似 主机类型-主机名-IP或域名 的格式,如Web-Hyrule001-192. ...

  5. String StringBuilder 包装类

    1. String 概述 程序中直接写上双引号的字符串就在字符串常量池中,new的不在池当中 java6之前常量池在方法区,java7以后将字符串常量池放在堆中 因为字符串是对象,应该在堆中 相同的字 ...

  6. CSS绝对定位的原点：是在border上、padding上还是在content上？

    用了那么久的绝对定位,却一直没在意一个问题,就是绝对定位的原点,究竟是在盒模型的哪一处.今天想到这个问题,直接搜索没有找到标准文档,也没有搜索到相关的问题,于是决定自己动手实现一下看看,并把这个结果发 ...

  7. Maven学习 八 采用Maven搭建SSM环境

    第一步:创建一个Maven项目 项目的打包方式选择,war 第二步:在webapp下面创建java web项目的目录结构,并配置web.xml文件 <?xml version="1.0 ...

  8. oracle xe在centos下的安装（更）

    更:重新弄了一下,就两个地方要注意,一是hosts文件的主机域名解析,而是profile文件配置,需要从oracle文件里复制过去在profile最下面添加就行了 注:下面方法反正我是失败了,好像xe ...

  9. Linux下mysql定时自动备份并FTP到远程脚本

    1.添加backupmysqleveryday.sh(vi /data/shell/backupmysqleveryday.sh) #!/bin/sh #this shell is user for ...

  10. error: failed to push some refs to 'https://gitee.com/xxx/xxx'

    一开始以为是本地版本和线上的差异 果断先直接pull  之后 还是不对,哎 不瞎搞了  搜... 获得消息: git pull --rebase origin master 原来如此:是缺失了文件