内容回顾

  • 表单标签

    • 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. js调用浏览器打印指定div内容
			
    --打印按钮事件 function printForm(){    var headstr = '<html xmlns:th="http://www.thymeleaf.org&qu ...
    
			
    2. 
						
  2. Oracle 12c RAC 静默安装文档
			
    参考文档: https://docs.oracle.com/en/database/oracle/oracle-database/12.2/cwlin/index.html https://docs. ...
    
			
    3. 
						
  3. Highcharts入坑记
			
    第一次用Highcharts画一个温度湿度变化的图片,因为不熟悉跳了好多坑,特记录下: 一.JS引用 <script src="~/Scripts/jquery.min.js" ...
    
			
    4. 
						
  4. 【转载】【时序约束学习笔记1】Vivado入门与提高--第12讲 时序分析中的基本概念和术语
			
    时序分析中的基本概念和术语 Basic concept and Terminology of Timing Analysis 原文标题及网址: [时序约束学习笔记1]Vivado入门与提高--第12讲 ...
    
			
    5. 
						
  5. 在Windows 10中截取截图的6种方式 简介
			
    在Windows 10中截取截图的6种方式 简介 截图对于不同的目的很重要.它可以用于捕获笔记本电脑上的任何内容的截图.所以,如果你使用Windows 10,你可能不知道如何截图,因为它是比较新的.因 ...
    
			
    6. 
						
  6. php分页实现
			
    <?php header("content-type:text/html;charset=utf8"); include 'conn.php'; //每页显示的数据条数 $p ...
    
			
    7. 
						
  7. Redis管道和发布订阅
			
    管道:原子性执行命令 ''' redis-py默认在执行每次请求都会创建(连接池申请连接)和断开(归还连接池)一次连接操作, 如果想要在一次请求中指定多个命令,则可以使用pipline实现一次请求指定 ...
    
			
    8. 
						
  8. Linux内核入门到放弃-内核活动-《深入Linux内核架构》笔记
			
    中断 中断类型 同步中断和异常.这些由CPU自身产生,针对当前执行的程序 异步中断.这是经典的中断类型,由外部设备产生,可能发生在任意时间. 在退出中断中,内核会检查下列事项. 调度器是否应该选择一个 ...
    
			
    9. 
						
  9. (转)lwip TCP client & FreeRTOS 打开TCP 的 保活机制 LWIP_TCP_KEEPALIVE==1
			
    参考大神教程:http://blog.sina.com.cn/s/blog_62a85b950101aw8x.html   老衲五木 :http://blog.sina.com.cn/s/blog_6 ...
    
			
    10. 
						
  10. FM算法解析及Python实现
			
    1. 什么是FM? FM即Factor Machine,因子分解机. 2. 为什么需要FM? 1.特征组合是许多机器学习建模过程中遇到的问题,如果对特征直接建模,很有可能会忽略掉特征与特征之间的关联信 ...
    
			
    11.