内容回顾

  • 表单标签

    • 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. [spring transaction]，service实现类中非事务方法直接调用自身事务方法导致事务无效的原因
			
    首先,准备service接口,两个 public interface AccountService { public void createAccount(Account account, int t ...
    
			
    2. 
						
  2. Java 集合系列（三）—— LinkedList
			
    以脑图的形式来展示Java集合知识,让零碎知识点形成体系 LinkedList    LinkedList是一种可以在任何位置进行高效地插入和删除操作的有序序列.   它的最基本存储结构是一个节点:每 ...
    
			
    3. 
						
  3. SQLServer之创建INSTEAD OF INSERT，UPDATE，DELETE触发器
			
    INSTEAD OF触发器工作原理 INSTEAD OF表示并不执行其所定义的操作INSERT,UPDATE ,DELETE,而仅是执行触发器本身,即当对表进行INSERT.UPDATE 或 DELE ...
    
			
    4. 
						
  4. Python基础——2函数
			
    函数 函数定义 def a(参数): 函数的参数:必选参数.默认参数.可变参数.命名关键字参数和关键字参数 a(x,y,z=11,*l,**b): a(x,y,z=11,*liat,city,job, ...
    
			
    5. 
						
  5. SpringBoot学习笔记(2) Spring Boot的一些配置
			
    外部配置 Spring Boot允许使用properties文件.yaml文件或者命令行参数作为外部配置 使用@Value注解,可以直接将属性值注入到你的beans中,并通过Spring的Enviro ...
    
			
    6. 
						
  6. 入门 Webpack，一篇就够了
			
    阅读本文之前,先看下面这个webpack的配置文件,如果每一项你都懂,那本文能带给你的收获也许就比较有限,你可以快速浏览或直接跳过:如果你和十天前的我一样,对很多选项存在着疑惑,那花一段时间慢慢阅读本 ...
    
			
    7. 
						
  7. AI GMM
			
    GMM(Gaussian Mixture Model,高斯混合模型)通常用于聚类(也用于密度估计),数据是由k个高斯分布生成,每个分布表示一个类. 期望最大(Expectation Maximizat ...
    
			
    8. 
						
  8. AI adanet
			
    adanet是一个基于Tensorflow的轻量级框架,只需要很少的专业干预,就可以自动学习出高质量的模型.在最近的AutoML成果上构建,既快速又灵活,还可以保证学习质量. adanet提供通用框架 ...
    
			
    9. 
						
  9. Docker Selenium
			
    SeleniumHQ官方项目:https://github.com/seleniumHQ/docker-selenium 项目目前快速迭代中. Docker 一般叫docker容器,一个可爱的鲸鱼,上 ...
    
			
    10. 
						
  10. C#中指针使用总结（转载）
			
    C#为了类型安全,默认并不支持指针.但是也并不是说C#不支持指针,我们可以使用unsafe关键词,开启不安全代码(unsafe code)开发模式.在不安全模式下,我们可以直接操作内存,这样就可以使用 ...
    
			
    11.