CSS的再深入5(更新中···)
页面布局
结构层:搭我们的页面框架。
布局层:针对框架内部结构进行排版。
不需要使用浮动解决的问题尽量不用。
使用浮动之后会使该元素脱标,并且该元素的margin。
div 盒子模型 :
就是一个容器,可以装任何标签。
- 盒子实际占用的空间
- 盒子的实际宽高和高度
- 如何理解盒子模型
细节性的问题块级元素的宽如果没有设置宽度,就是父级的宽,如果没有设置高度根据内容而定。
结构选择器
(同一父级下子标签同级同标签名时使用,用法 标签名: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;如果设置值了,相对原来的位置进行调整
二者区别
- absolute会脱离标准流,relative不会,relative虽然给值了,但是依然占有着原来的位置。
- relative存在”形影分离”,所以一般情况下不建议添加值了,一般给子元素当参照位置,或者是元素的微调。
- absolute 会有一种现象”压盖”效果。
z-index层次关系,可以改变元素的层叠位置,所有的标签默认是0, z-index的值越大,该元素就在上方。
备注:以后我们做定位的时候,尽量保持”子绝父相”。
fixed 固定定位
position:fixed;

脱离标准流的属性有哪些:float position:absolute position:fixed.
Position:static;静态
form表单

action 提交的地址 就是你要提交到的网址(或后台)如:
methods 提交方式 post 和get
get 是在http的url上提交不加密 post加密在http中的一个body对象上提交的。

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


1,定位让元素居中

2.透明度 opacity
默认值是1 不透明 0是全透明
值是0-1之间
CSS的再深入5(更新中···)的更多相关文章
- CSS的再深入(更新中···)
在上一章我们提到了一个新的概念,叫做块级样式,讲到这里就要科普一下: 标签又分为两种: (1)块级标签 元素特征:会独占一行,无论内容多少,可以设置宽高··· (2)内敛标签(又叫做行内标签) 元素特 ...
- CSS的初了解(更新中···)
在前面,我们学习了html的结构.基本骨架.起名方式和选择器,接下来,我们就要学习CSS了. 首先,我们要知道CSS是什么. CSS 全称叫层叠样式表,作用是给html添加样式style,添加属性. ...
- less.css基础学习,陆续更新中
//基础//概念:动态样式语言,有很多语言的特性:变量,函数,运算等 //变量:通过一个简单的@+字母,数字下划线等,但不能以数字开头,不能关键字,保留字等//注意less.css是全局变量,除在函数 ...
- JS基础知识再整理..........不断更新中
1.JS的五种基本数据类型:字符串.数值.布尔.null.underfined. 2.在JS中,字符串.数值.布尔三种数据类型,有其属性和方法: 3.字符串的三种常用方法[.indexof()..su ...
- CSS效果集锦(持续更新中)
高亮光弧效果 使用CSS3实现的一个高亮光弧效果,当鼠标hover到某一个元素上时,一道光弧从左向右闪过,效果如下: 代码如下: <!DOCTYPE html> <html lang ...
- css:使用笔记(不断更新中...)
1,inline-block Inline :1是不支持宽高的 2 在一行内显示 span 啥的~ Block:1,占一行 2支持宽高 但是img因为在一行并排显示,我们归为行(内嵌)元素,但支持设置 ...
- CSS的进一步深入(更新中···)
在之前我们学了6种选择器和三种CSS样式的引入,学习选择器就是为了更好的选择文本,学习CSS的引入是为了使文本增加各种样式和属性, 下面我们简单来学习一下为文本加样式和一些属性和属性值: 1.文本的样 ...
- HTML + CSS (下)【更新中】
弹性盒子: 定义:弹性盒子模型是css3中新提出的一种布局方案.是一种为了应对针对不同屏幕宽度不同设备的一整套新的布局方案. 主要是对一个容器中的子元素进行排列.对齐和分配空白空间的方案的调整. 新旧 ...
- CSS相关知识(持续更新中)
1. 弹性布局 一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式.引入弹性布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列.对齐和分配空白空间. 2. ...
- html2canvas - 项目中遇到的那些坑点汇总(更新中...)
截图模糊 原理就是讲canvas画布的width和height放大两倍. 后来学习canvas的时候,才了解到这种写法不同于css的宽高设置, 因为css里的只是展示画布显示的大小,不像这样是c ...
随机推荐
- java线程和多线程同步
java的线程之间资源共享,所以会出现线程同步问题(即,线程安全) 一.线程创建: 方式①:extends java.lang.Thread,重写run(),run方法里是开启线程后要做的事..sta ...
- openERP笔记 自定义模块开发
##需求描述 输入和查询课程,把信息储存到课程对象里 课程包含以下信息:名称,价格,天数,开始日期,教师,学员 每个课程可以有多个学员,要记录学员的姓名.电话.电子邮件 课程可以添加教材和作业等文档附 ...
- Ext 修改内容之后 不做任何动作 再次修改时的数据是原来第一次修改前的数据
转自 http://blog.csdn.net/jaune161/article/details/18220257 在项目开发中遇到这样一个问题,点击Grid中的一条记录并修改,修改完后保存并且刷新 ...
- usb_camera
- Android ListVeiw控件(转载整理)
列表的显示需要三个元素: 1.ListVeiw 用来展示列表的View. 2.适配器 用来把数据映射到ListView上的中介. 3.数据 具体的将被映射的字符串,图片,或者基本组件. 根据列表 ...
- docker容器的操作
容器操作 1.查看本地容器 docker ps -a # 查看所有容器 docker ps # 查看所有正在运行的容器 2.容器的创建与启动 方法一:两步完成(强烈推荐方法)(1)创建 docker ...
- 各操作系统安装redis
mac系统安装redis 注:Mac操作亲测可用,其他系统的安装均从菜鸟教程转载而来,未测试是否可用 一.下载 打开官网:https://redis.io/ Download---Stable---D ...
- 通过android studio的gradle强制cmake输出命令详情
https://stackoverflow.com/questions/43439549/force-cmake-in-verbose-mode-via-gradle-and-the-android- ...
- Centos下,Docker部署Yapi接口管理平台(详细得令人发指)
接口测试的工具很多,公司引进了接口管理平台Yapi,自己尝试直接搭建,从安装Nodejs到配置MongoDB数据库,再到安装yapi的时候,遇到浏览器打开本地服务器Ip地址后,没有显示部署内容...没 ...
- 2019.04.13 python基础
第一节 主要讲python背景 没什么要注意的 了解记住概念就好 python官网 python.org 自带shell 可以运行python代码 在IDLE中怎么运行代码 新建文本 ...