前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Day7:html和css

Day7:html和css

作者头像
达达前端
发布2019-07-03 11:55:28
1.9K0
发布2019-07-03 11:55:28
举报
文章被收录于专栏:达达前端

Day7:htmlcss

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

清除浮动的方法

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

代码语言:javascript
复制
<div style="clear: both"></div>

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

代码语言:javascript
复制
.clearfix:after {
 content: "";
 display: block;
 height: 0;
 clear: both;
 visibility: hidden;
}
.clearfix {
 *zoom: 1;
}

进行双伪元素清除浮动

代码语言:javascript
复制
.clearfix:before, clearfix:after {
 content: "";
 display: table;
 // 可以清除浮动
}
.clearfix:after {
 clear:both;
}
.clearfix {
 *zoom: 1;
}

好记性不如敲烂键盘

vertical-align垂直对齐

显示和隐藏

代码语言:javascript
复制
display visibility overflow
代码语言:javascript
复制
dispaly:none;
display:block;
代码语言:javascript
复制
dispaly: block;
dispaly: inline;
dispaly: none;
代码语言:javascript
复制
// 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

代码语言:javascript
复制
visibility: inherit | visible | collapse | hidden

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

代码语言:javascript
复制
vertical-align: baseline | top | middle | bottom

overflow

代码语言:javascript
复制
overflow: visible | auto | hidden | scroll

cursor鼠标样式:

代码语言:javascript
复制
cursor: move;
代码语言:javascript
复制
<ul>
 <li style="cursor: default"> 我是达叔 </li>
 <li style="cursor: pointer"> 小手 </li>
 <li style="cursor: move">  移动 </li>
 <li style="cursor: text"> 文本 </li>
</ul>

轮廓outline

代码语言:javascript
复制
outline: none;
outline: outline-color || outline-style || outline-width

<textarea name="" id="" cols="30" rows="10">
</textarea>

resize防止拖拽文本域

代码语言:javascript
复制
resize: none
代码语言:javascript
复制
<textarea style="resize: none;"></textarea>

vertical-align垂直对齐

代码语言:javascript
复制
margin: 0 auto;
代码语言:javascript
复制
vertical-align: baseline;

white-space设置

text-overflow文字溢出

代码语言:javascript
复制
text-overflow: clip | ellipsis
clip: 不显示省略标记(...)
ellipsis: 当对象内文本溢出,显示(....)

盒子模型(CSS重点)

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

盒子边框(border)

代码语言:javascript
复制
border : border-width || border-style || border-color 
代码语言:javascript
复制
none:没有边框即忽略所有边框的宽度(默认值)
solid:边框为单实线(最为常用的)
dashed:边框为虚线  
dotted:边框为点线
double:边框为双实线
代码语言:javascript
复制
border-top: 1px solid red; /*上边框*/
border-bottom: 2px solid green; /*下边框*/
border-left: 1px solid blue;
border-right: 5px solid pink;

表格的细线边框

代码语言:javascript
复制
table{ border-collapse:collapse; }  
collapse 单词是合并的意思

border-collapse:collapse; 
表示相邻边框合并在一起。

内边距(padding

padding属性用于设置内边距。

代码语言:javascript
复制
padding-top:上内边距

padding-right:右内边距

padding-bottom:下内边距

padding-left:左内边距

外边距(margin

margin属性用于设置外边距。

代码语言:javascript
复制
margin-top:上外边距
margin-right:右外边距
margin-bottom:下外边距
margin-left:上外边距
margin:上外边距 右外边距  下外边距  左外边

外边距实现盒子居中

代码语言:javascript
复制
.header{ width:960px; margin:0 auto;}
文字水平居中 text-align: center
子水平居中  左右margin 改为 auto

清除元素的默认内外边距

代码语言:javascript
复制
* {
   padding:0;         /* 清除内边距 */
   margin:0;          /* 清除外边距 */
}

外边距合并

代码语言:javascript
复制
使用margin定义块元素

效果

代码语言:javascript
复制
overflow:hidde

content宽度和高度

宽度属性width和高度属性height

圆角边框(CSS3)

代码语言:javascript
复制
border-radius: 50%;

盒子阴影(CSS3)

代码语言:javascript
复制
box-shadow:水平阴影 垂直阴影 模糊距离(虚实)  阴影尺寸(影子大小)  阴影颜色  内/外阴影;
box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4);

浮动(float)

效果

代码语言:javascript
复制
选择器{float:属性值;}

属性值

描述

left

元素向左浮动

right

元素向右浮动

none

元素不浮动

清除浮动本质

效果

代码语言:javascript
复制
选择器{clear:属性值;}   clear 清除 

属性值

描述

left

清除左侧浮动的影响

right

清除右侧浮动的影响

both

同时清除左右两侧浮动的影响

额外标签法

代码语言:javascript
复制
clear:both
<div style=”clear:both”></div>

// 父级添加overflow属性方法
给父级添加: overflow为 hidden|auto|scroll  都可以实现

使用after伪元素清除浮动

代码语言:javascript
复制
 .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;
}

元素的显示与隐藏

代码语言:javascript
复制
display 显示
display : none 隐藏对象
display:block 

visibility 可见性
visible :  对象可视
hidden :  对象隐藏

overflow 溢出
visible : 不剪切内容也不添加滚动条。
auto :超出自动显示滚动条,不超出不显示滚动条
hidden : 不显示超过对象尺寸的内容,超出的部分隐藏掉
scroll : 不管超出内容否,总是显示滚动条

鼠标样式cursor

代码语言:javascript
复制
cursor :  default  小白 | pointer  小手  | move  移动  |  text  文本

轮廓 outline

代码语言:javascript
复制
outline : outline-color || outline-style || outline-width

// outline: 0;   或者  outline: none; 

防止拖拽文本域resize

代码语言:javascript
复制
<textarea  style="resize: none;"></textarea>

vertical-align 垂直对齐

代码语言:javascript
复制
margin: 0 auto;
text-align: center;
vertical-align 垂直对齐
vertical-align : baseline |top |middle |bottom 

溢出的文字隐藏

代码语言:javascript
复制
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 点赞
本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2018.12.29 ,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 清除浮动的方法
  • 盒子模型(CSS重点)
  • 盒子边框(border)
  • 表格的细线边框
  • 内边距(padding)
  • 外边距(margin)
  • 外边距实现盒子居中
  • 清除元素的默认内外边距
  • 外边距合并
  • content宽度和高度
  • 圆角边框(CSS3)
  • 盒子阴影(CSS3)
  • 浮动(float)
  • 清除浮动本质
  • 额外标签法
  • 使用after伪元素清除浮动
  • 元素的显示与隐藏
  • 鼠标样式cursor
  • 轮廓 outline
  • 防止拖拽文本域resize
  • vertical-align 垂直对齐
  • 溢出的文字隐藏
  • 结语
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档