内容回顾

  • 表单标签

    • 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的三种引入方式

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

    <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

今日内容

盒模型

​ 概念:

​

​ 属性:

  • 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, 盒模型, 浮动的更多相关文章
	

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

	


随机推荐
	

    
									
  1. Git使用入门笔记
			
    1. 创建并初始化一个 代码仓库 (repository) $ git init 2.查看当前状态 $ git status 3. 将修改后的文件推入缓冲区 $ git add <filenam ...
    
			
    2. 
						
  2. 实战项目中Java heap space错误的解决
			
    部标GPS通讯系统在上线之后,经过不断调试,终于稳定运行一段时间,后来又遇到了Java heap space错误异常!日志如下: 说明系统中有未释放的对象.如何找出这些未释放对象以及监控JVM堆内存, ...
    
			
    3. 
						
  3. 【原】Java学习笔记008 - 方法（函数）
			
    package cn.temptation; public class Sample01 { public static void main(String[] args) { // 方法/函数 Met ...
    
			
    4. 
						
  4. LSB和MSB
			
    最低有效位(the least significant bit,lsb)是指一个二进制数字中的第0位(即最低位),具有权值为2^0,可以用它来检测数的奇偶性.与之相反的称之为最高有效位.在大端序中,l ...
    
			
    5. 
						
  5. c/c++ 多线程 多个线程等待同一个线程的一次性事件
			
    多线程 多个线程等待一个线程的一次性事件 背景:从多个线程访问同一个std::future,也就是多个线程都在等待同一个线程的结果,这时怎么处理. 办法:由于std::future只能被调用一次get ...
    
			
    6. 
						
  6. python--多继承
			
    多继承 子类可以拥有多个父类,继承所有父类的属性和方法 class 子类名(父类名1,父类名2): 多个父类直接不要有重名的方法和属性,子类对象调用,没法确认.
    
			
    7. 
						
  7. 【PAT】B1013 数素数
			
    用埃氏筛筛出素数表(节约时间) 素数的筛选范围不能小了,一定要够大 #include<stdio.h> int main(){ int N,M;scanf("%d %d" ...
    
			
    8. 
						
  8. 网络流之P3254 圆桌问题
			
    题目描述 假设有来自m 个不同单位的代表参加一次国际会议.每个单位的代表数分别为ri (i =1,2,……,m). 会议餐厅共有n 张餐桌,每张餐桌可容纳ci (i =1,2,……,n)个代表就餐.  ...
    
			
    9. 
						
  9. C# 对文本文件的几种读写方法总结
			
    计算机在最初只支持ASCII编码,但是后来为了支持其他语言中的字符(比如汉字)以及一些特殊字符(比如€),就引入了Unicode字符集.基于Unicode字符集的编码方式有很多,比如UTF-7.UTF ...
    
			
    10. 
						
  10. Python排序算法——冒泡排序
			
    有趣的事,Python永远不会缺席! 如需转发,请注明出处:小婷儿的python https://www.cnblogs.com/xxtalhr/p/10786904.html 一.冒泡排序(Bubb ...
    
			
    11.