Day041--CSS, 盒模型, 浮动

内容回顾

表单标签
- input
  - type
    - text 普通的文本
    - password 密码
    - radio 单选默认选中添加checked
      - 互斥的效果给radio标签添加相同的name
    - checkbox 多选
    - submit 表单提交按钮
    - button 普通的按钮
    - reset 充值按钮
  - name 会被封装到请求体中的key
  - value 是标签显示的内容,会被封装到请求体中的value
- select
  - name 会被封装到请求体中的key
  - 子元素一定是 option
    - value 是标签显示的内容,会被封装到请求体中的value
    - selected 默认选中的状态
- textarea
  - name
  - value
  - rows 行数决定了它的高度
  - cols 列数决定了它的宽度

css的三种引入方式

行内样式 它的权重是最高的

<div style = 'width:200px;color: red;'>

    alex

</div>

2.内接式

<head>

    <style>

        div{

            color:red;

        }

    </style>

</head>

3.外接式

<head>

    <link rel="stylesheet" href="./index.css"/> </head>

选择器

基本选择器

种类种类	语法	作用
标签选择器	div{}	选中页面中所有的`div`标签,选的共性
类选择器	.box{}	找的是'共性'的元素,class可以重复,又可以设置多个
id选择器	#box{}	找的是'特性'的标签,它是唯一,通常是与后面的js有很大关系
统配符选择器	*{}	不建议在工作中使用,可以拿着做测试.重置样式库:https://meyerweb.com/eric/tools/css/reset/

高级选择器

种类	语法	作用
后代选择器	div p{}	选取后代(所有的孩子)的元素
子代选择器	div>p{}	选取亲儿子的元素
组合选择器	div,p,a,span{}	多个标签选择器组合,构成了组合选择器
交集选择器	div.atcive	前面是标签选择器,第二个是类选择器

伪类选择器 '爱恨准则 LoVe HAte'

种类作用

a:link{} 没有被访问过的样式

a:visited{} 访问过后的样式

a:hover 悬浮时的样式

a:active 摁住的时候的样式
权重的问题
- 数 id 类标签的数量
- 行内样式 1000 > id 100 > 类 10 > 标签 1

种类	作用
a:link{}	没有被访问过的样式
a:visited{}	访问过后的样式
a:hover	悬浮时的样式
a:active	摁住的时候的样式

今日内容

盒模型

概念:

属性:

width 内容的宽度
height 内容的高度
padding 内边距内容到边框之间的距离
- 背景色也被填充
border 边框
margin 外边距

需求: 做一个302*302的盒子

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        /*有多种方法*/

        .box{

            width: 200px;

            height: 200px;

            /*四个方向全部设置*/

            padding: 50px;

            border: 1px solid red;

            background-color: darkslateblue;

        }

    </style>

</head>

<body>

<!--做一个302*302的盒子-->

<div class="box"></div>



</body>

</html>

盒模型的计算

如果保证盒模型不变,当加padding,就要对盒模型的宽或者高减,保证盒模型的不变

通过padding能调整子内容的位置,对于padding来说,通常描述的是父子之间的距离

width

定义:内容的宽度

height

定义:内容的高度

padding

定义:内边距内容到边框之间的距离

.container{

            width: 200px;

            height: 200px;

            background-color: darkgoldenrod;

            /*一个值  四个方向都有值*/

            /*padding: 30px;*/

            /*两个值:上下  左右*/

            /*padding: 20px 30px;*/

            /*三个值: 上 左右  下 */

            /*padding: 30px 20px 40px;*/

            /*四个值: 上 右 下 左 顺时针*/

            padding: 20px 30px 40px 50px;

  }

四个方向单独设置

padding-top: 20px;

padding-right: 30px;

padding-bottom: 40px;

padding-left: 50px;

border

定义:盒子的边框

.box{

            width: 300px;

            height: 300px;

            background-color: darkgoldenrod;

            /*border: 1px solid darkred;*/



            /*根据方向来设置属性*/

            /*border-left: 1px solid darkred;*/

            /*border-right: 5px dotted darkgoldenrod;*/

            /*border-top: 10px double darkblue;*/

            /*border-bottom: 1px solid greenyellow;*/

            /*根据三要素*/

            /*border-width: 5px 10px 1px;*/

            /*border-style: solid double dashed;*/

            /*border-color: red yellow darkcyan darkgray;*/

            /*border: 0;*/

            border-radius: 50%;

        }

制作小三角

.sanjiao{

            width: 0px;

            height: 0px;

            border-left: 50px solid transparent;

            border-bottom: 50px solid green;

            border-right: 50px solid transparent;

        }

margin

定义:外边距一个盒子到另一个盒子的距离

前提条件是: 标准文档流下

水平方向上不会出现问题
垂直方向上: 会出现塌陷问题,我们以后再布局页面的时候设置一个方向,而不要设置两个方向

让标准文档流下的盒子居中

/*让盒子居中*/

            /*margin-right: auto;*/

            /*margin-left: auto;*/

            margin: 0 auto;

浮动

要浮动一起浮动,另外有浮动清除浮动

浮动的好处:

浮动实现元素并排

浮动的现象:

脱标
字围效果
如果标签一旦浮动,就不区分行内标签还是块级标签,可以任意设置宽高
贴边现象

浮动带来的问题

如果父盒子没有设置高度,子盒子都设置浮动,(脱标了,不在文档上占位置) 撑不起父盒子的高度

清除浮动

给父盒子设置固定高度
内墙法
- 在最后一个浮动元素的后面添加一个空的块级的标签,给这个标签设置类名clearfix
- ```
.clearfix{
    clear:both;
    
}
```
- 代码冗余

CSS居中补充

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .father{

            width: 100%;

            height: 200px;

            background-color: green;

        }

        .active{

            width: 400px;

            height: 80px;

            margin: 0 auto;

            background-color: yellow;

        }

        .box{

            width: 400px;

            height: 80px;

            background-color: red;

            text-align: center;

            line-height: 80px;

            float: left;

        }

    </style>

</head>

<body>

<div class="father">

    <div class="active">

        <div class="box">alex</div>

    </div>

</div>

</body>

</html>

绝对定位的盒子的居中

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        .father{

            width: 300px;

            height: 400px;

            background-color: red;

            position: relative;

        }

        .box{

            width: 40px;

            height: 40px;

            background-color: green;

            position: absolute;

            left: 50%;

            margin-left: -20px;

        }

        /*属性选择器*/

        input[type='text']{

            font-size: 20px;

        }

        ul li:first-child{

            color: red;

        }

        ul li:last-child{

            color: greenyellow;

        }

        ul li:nth-child(4){

            color: deepskyblue;

        }

        ul li:nth-child(4n+1){

            color: orange;

        }

    </style>

</head>

<body>

    <div class="father">

        <div class="box"></div>

    </div>

    <input type="text">

    <input type="password">

    <input typeof="submit">

    <ul>

        <li>1</li>

        <li>1</li>

        <li>1</li>

        <li>1</li>

        <li>1</li>

        <li>1</li>

    </ul>

</body>

</html>

Day041--CSS, 盒模型, 浮动的更多相关文章

大前端学习笔记整理【一】CSS盒模型与基于盒模型的6种元素居中方案
概览 CSS盒模型,规定了元素框来处理元素的内容.内边距.边框和外边距的方式元素部分是指内容部分,也是最实际的内容,包围内容的称之为内边距,内边距外围是边框,边框外围就是外边距:且外边距是透明的, ...
CSS盒模型
CSS盒模型是CSS 可视化格式化系统的基石,它是理解样式表如何工作的核心概念.盒模型用于元素定位和页面布局.元素框的最内部分是实际的内容,直接包围内容的是内边距.内边距呈现了元素的背景.内边距的边缘 ...
第 16 章 CSS 盒模型[下]
学习要点: 1.元素可见性 2.元素盒类型 3.元素的浮动主讲教师:李炎恢本章主要探讨 HTML5 中 CSS 盒模型,学习怎样了解元素的外观配置以及文档的整体布局. 一．元素可见性使用 vis ...
7.css盒模型
所谓的盒模型,其实就是把元素当成盒子,元素里的文本就是盒子里的东西. 而根据元素的特效,其盒模型的特效也不同,下面是一些总结: 1.块级元素(区块) 所谓块级元素,就是能够设置元素尺寸.有隔离其他元素 ...
CSS盒模型和定位的类型
此文根据Steven Bradley的<How Well Do You Understand CSS Positioning?>所译,整个译文带有我自己的理解与思想,如果译得不好或不对之处 ...
第七十三节，css盒模型
css盒模型学习要点: 1.元素尺寸 2.元素内边距 3.元素外边距 4.处理溢出本章主要探讨HTML5中CSS盒模型,学习怎样了解元素的外观配置以及文档的整体布局. 一．元素尺寸 CSS盒模型中 ...
CSS盒模型的深度思考及BFC
本文最初发表于博客园,并在GitHub上持续更新前端的系列文章.欢迎在GitHub上关注我,一起入门和进阶前端. 以下是正文. 题目:谈一谈你对CSS盒模型的认识专业的面试,一定会问 CSS 盒模型 ...
面试汇总——说一下CSS盒模型
本文是面试汇总分支——说一下CSS盒模型. 基本概念:W3C标准盒模型和IE盒模型 CSS如何设置这两种模型 JS如何获取盒模型对应的宽和高根据盒模型解释边距重叠 BFC(边距重叠解决方案) 一. ...
CSS盒模型的介绍
CSS盒模型的概念与分类 CSS盒模型就是一个盒子,封装周围的HTML元素,它包括内容content.边框border.内边距padding.外边距margin. CSS盒模型分为标准模型和 ...
详解CSS盒模型
原文地址:http://luopq.com/2015/10/26/CSS-Box-Model/ 本文主要是学习CSS盒模型的笔记,总结了一些基本概念,知识点和细节. 一些基本概念 HTML的大多数元素 ...

随机推荐

PJSUA2开发文档--第九章 PJSUA2应用程序示例
9. PJSUA2示例应用程序 9.1 示例应用程序 9.1.1 C++ pjsip-apps/src/samples/pjsua2_demo.cpp 是一个非常简单可用的C++示例应用程序. /* ...
TortoiseGit之配置密钥
TortoiseGit 使用扩展名为ppk的密钥,而不是ssh-keygen生成的rsa密钥.使用命令ssh-keygen -C "邮箱地址" -t rsa产生的密钥在Tortoi ...
threejs学习笔记（二）
THREE.WebGLRenderer THREE.Scene THREE.OrthographicCamera正交相机 THREE.PerspectiveCamera透视相机 renderer.se ...
Linux删除文件夹和修改文件名
rm [选项] 文件 -f, --force 强力删除,不要求确认 -i 每删除一个文件或进入一个子目录都要求确认 -I 在删除超过三个文件或者递归删除前要求确认 -r, -R 递归删除子目录 -d, ...
yum工作原理
yum工作原理 yum是一个RPM包的前端管理工具,在rpm包的依赖关系已经被建成数据库的前提下它能够实现自动查找相互依赖的人rpm包,并从repository中下载互相依赖的rpm包到本地. YUM ...
python小白——进阶之路——day2天-———容器类型数据（list，set ，tuple，dict，str）
#容器类型数据 : list tuple # ###列表的特性:可获取,可修改,有序 # 声明一个空列表 listvar = [] print(listvar,type(listvar)) # (1) ...
【Topcoder 10689】TheSoccerDivOne
题意:给\(n\)个队伍的积分,它们要踢足球,每个队伍剩下4场没有踢. 问踢完后\(0\)队伍最高排名. 思路:首先想了贪心,可惜不对. 那么老实dp. 首先:每个队伍具体和哪个人踢了没有关系. 那么 ...
洛谷 P1439 【模板】最长公共子序列
\[传送门啦\] 题目描述给出\(1-n\)的两个排列\(P1\)和\(P2\),求它们的最长公共子序列. 输入输出格式输入格式: 第一行是一个数\(n\), 接下来两行,每行为\(n\)个数,为 ...
GRE与VXLAN
一 GRE 1.1 概念 GRE全称是Generic Routing Encapsulation,是一种协议封装的格式,具体格式内容见:https://tools.ietf.org/html/rfc2 ...
linux查询日志常用命令，经常更新
1.grep命令 grep -c "查询内容" filename ------c,是小写,可以知道你要查询的内容在这个文件中是否存在 grep -C 10 "查询内 ...