页面布局

结构层:搭我们的页面框架。

布局层:针对框架内部结构进行排版。

不需要使用浮动解决的问题尽量不用。

使用浮动之后会使该元素脱标,并且该元素的margin。

div 盒子模型 :

就是一个容器,可以装任何标签。

  1. 盒子实际占用的空间
  2. 盒子的实际宽高和高度
  3. 如何理解盒子模型  

细节性的问题块级元素的宽如果没有设置宽度,就是父级的宽,如果没有设置高度根据内容而定。

结构选择器

(同一父级下子标签同级同标签名时使用,用法  标签名:nth-of-type(序号/或者说是第几个)

div:nth-of-type(1)

单位问题 width

1.100px

2.百分比,给一个元素设置的宽是50%,那么这个50% 是相对他的父级。

position细说

  position:relative;

  left:100px;

  top:100px;

  position:absolute;

  left:100px;

  top:100px;

  position:relative;如果设置值了,相对原来的位置进行调整

  二者区别

    1.   absolute会脱离标准流,relative不会,relative虽然给值了,但是依然占有着原来的位置。
    2.   relative存在”形影分离”,所以一般情况下不建议添加值了,一般给子元素当参照位置,或者是元素的微调。
    3.   absolute 会有一种现象”压盖”效果。

  z-index层次关系,可以改变元素的层叠位置,所有的标签默认是0, z-index的值越大,该元素就在上方。

  备注:以后我们做定位的时候,尽量保持”子绝父相”。

  fixed 固定定位

  position:fixed;

  

  脱离标准流的属性有哪些:float  position:absolute  position:fixed.

  Position:static;静态

form表单

  

action 提交的地址 就是你要提交到的网址(或后台)如:

https://www.baidu.com

methods 提交方式 post 和get

get 是在http的url上提交不加密   post加密在http中的一个body对象上提交的。

  

http 是一种协议,就是客户端和服务端链接的一种协议。超文本传输协议

下拉列表

  

1,定位让元素居中

2.透明度 opacity

默认值是1 不透明 0是全透明

值是0-1之间

CSS的再深入5(更新中···)的更多相关文章

  1. CSS的再深入(更新中···)

    在上一章我们提到了一个新的概念,叫做块级样式,讲到这里就要科普一下: 标签又分为两种: (1)块级标签 元素特征:会独占一行,无论内容多少,可以设置宽高··· (2)内敛标签(又叫做行内标签) 元素特 ...

  2. CSS的初了解(更新中···)

    在前面,我们学习了html的结构.基本骨架.起名方式和选择器,接下来,我们就要学习CSS了. 首先,我们要知道CSS是什么. CSS 全称叫层叠样式表,作用是给html添加样式style,添加属性. ...

  3. less.css基础学习,陆续更新中

    //基础//概念:动态样式语言,有很多语言的特性:变量,函数,运算等 //变量:通过一个简单的@+字母,数字下划线等,但不能以数字开头,不能关键字,保留字等//注意less.css是全局变量,除在函数 ...

  4. JS基础知识再整理..........不断更新中

    1.JS的五种基本数据类型:字符串.数值.布尔.null.underfined. 2.在JS中,字符串.数值.布尔三种数据类型,有其属性和方法: 3.字符串的三种常用方法[.indexof()..su ...

  5. CSS效果集锦(持续更新中)

    高亮光弧效果 使用CSS3实现的一个高亮光弧效果,当鼠标hover到某一个元素上时,一道光弧从左向右闪过,效果如下: 代码如下: <!DOCTYPE html> <html lang ...

  6. css:使用笔记(不断更新中...)

    1,inline-block Inline :1是不支持宽高的 2 在一行内显示 span 啥的~ Block:1,占一行 2支持宽高 但是img因为在一行并排显示,我们归为行(内嵌)元素,但支持设置 ...

  7. CSS的进一步深入(更新中···)

    在之前我们学了6种选择器和三种CSS样式的引入,学习选择器就是为了更好的选择文本,学习CSS的引入是为了使文本增加各种样式和属性, 下面我们简单来学习一下为文本加样式和一些属性和属性值: 1.文本的样 ...

  8. HTML + CSS (下)【更新中】

    弹性盒子: 定义:弹性盒子模型是css3中新提出的一种布局方案.是一种为了应对针对不同屏幕宽度不同设备的一整套新的布局方案. 主要是对一个容器中的子元素进行排列.对齐和分配空白空间的方案的调整. 新旧 ...

  9. CSS相关知识(持续更新中)

    1. 弹性布局 一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式.引入弹性布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列.对齐和分配空白空间. 2. ...

  10. html2canvas - 项目中遇到的那些坑点汇总(更新中...)

    截图模糊    原理就是讲canvas画布的width和height放大两倍. 后来学习canvas的时候,才了解到这种写法不同于css的宽高设置, 因为css里的只是展示画布显示的大小,不像这样是c ...

随机推荐

  1. mac 初次配置apache,及mac下安装mysql

    先打开apache,在浏览器上输入  localhost     回车后会如果屏幕上显示:It works! 如下图: 这说明你的apache已开启 mac 下apache配置(mac自带apache ...

  2. python语法_变量及命名规则

    变量:存储信息的,日后被调用,修改操作 常量:固定不变的量,字母大写 变量命名规则: 1 有字母,数字以及下划线等符号组成 2 区分大小写 3 不能使用数字开头,不能含有特殊字符和空格 4 不能使用 ...

  3. exe电子书制作教程(超详细)【申明:来源于网络】

    exe电子书制作教程(超详细)[申明:来源于网络] 地址:http://wenku.baidu.com/view/0b046907eff9aef8941e0631.html

  4. 201621123049《java程序设计》第四周学习总结

    1. 本周学习总结 1.1 写出你认为本周学习中比较重要的知识点关键词 继承 类型转换 覆盖 1.2 尝试使用思维导图将这些关键词组织起来.注:思维导图一般不需要出现过多的字. 2. 书面作业 1. ...

  5. java Int 和 String 之间的转换

    String 转换成 int Integer.parseInt(formParams.get("id")) int 转换成 string Integer.toString(id);

  6. [07-01]http网页提示含义

    出现较多的一些网页代码提示的意思: 100 - 继续. 101 - 切换协议. 110 重新启动标记答复. 120 服务已就绪,在 nnn 分钟后开始. 125 数据连接已打开,正在开始传输. 150 ...

  7. 把项目运行到本地环境及mysql配置

    1. 添加本地域名C:\Windows\System32\drivers\etc\hosts 127.0.0.1 local.v7.com 2. 添加一个apache虚拟站点D:\wamp64\bin ...

  8. 附8 zipkin

    一.zipkin作用 全链路追踪工具(查看依赖关系) 查看每个接口.每个service的执行速度(定位问题发生点或者寻找性能瓶颈) 二.zipkin工作原理 创造一些追踪标识符(tracingId,s ...

  9. vue的install

    将$platform挂载到Vue.prototype下面,this里面的内容就是$platform里面的东西 Vue.prototype.$platform = this 在chrome开发者工具下的 ...

  10. hbase 快速开发

    hbase是一个分布式的NoSQL,部署起来配置很多东西,开发起来太慢,可以使用docker快速搭建环境 gs@gs-virtual-machine:~$ sudo docker run -ti ha ...