<!DOCTYPE html>

.margin-test {
margin-top:5px;
margin-right:10px;
margin-bottom:15px;
margin-left:20px;
}

起床拥抱太阳

今天学习的内容有:

选择想要查看的内容

设置标签样式

  

给标签设置长短

  

可以使用display来更改它为行内标签

意义
display:"none" HTML文档中元素存在,但是在浏览器中不显示。一般用于配合JavaScript代码使用。
display:"block" 默认占满整个页面宽度,如果设置了指定宽度,则会用margin填充剩下的部分。
display:"inline" 按行内元素显示,此时再设置元素的width、height、margin-top、margin-bottom和float属性都不会有什么影响。
display:"inline-block" 使元素同时具有行内元素和块级元素的特点。

  

css盒子

意义
magin 用于控制元素与元素之间的距离;margin的最基本用途就是控制元素周围空间的间隔,从视觉角度上达到相互隔开的目的。
padding 默 用于控制内容与边框之间的距离;
Border 围绕在内边距和内容外的边框。
Content 盒子的内容,显示文本和图像。

float

在 CSS 中,任何元素都可以浮动。



浮动元素会生成一个块级框,而不论它本身是何种元素。



关于浮动的两个特点:



浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。

由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。

clear

描述
left 在左侧不允许浮动元素。
right 在右侧不允许浮动元素。
both 在左右两侧均不允许浮动元素。
none 默认值。允许浮动元素出现在两侧。
inherit 规定应该从父元素继承 clear 属性的值。

清除浮动有三种方法

  • 固定高度
  • 伪元素清除法
  • overflow:hidden

描述
visible 默认值。内容不会被修剪,会呈现在元素框之外。
hidden 内容会被修剪,并且其余内容是不可见的。
scroll 内容会被修剪,但是浏览器会显示滚动条以便查看其余的内容。
auto 如果内容被修剪,则浏览器会显示滚动条以便查看其余的内容。
inherit 规定应该从父元素继承 overflow 属性的值。

定位

static

static 默认值,无定位,不能当作绝对定位的参照物,并且设置标签对象的left、top等值是不起作用的的。

relative

用于让自己成为一个参照物

absolute

被设置为绝对定位的元素框

fixed

完全固定再浏览器的某位置

返回顶部

脱离文档流:


  绝对定位


  固定定位


不脱离文档流:


  相对定位

z-index

设置对象的层叠顺序。

  1. z-index 值表示谁压着谁,数值大的压盖住数值小的,
  2. 只有定位了的元素,才能有z-index,也就是说,不管相对定位,绝对定位,固定定位,都可以使用z-index,而浮动元素不能使用z-index
  3. z-index值没有单位,就是一个正整数,默认的z-index值为0如果大家都没有z-index值,或者z-index值一样,那么谁写在HTML后面,谁在上面压着别人,定位了元素,永远压住没有定位的元素。
  4. 从父现象:父亲怂了,儿子再牛逼也没用

opacity

用于调整透明度

用html写博客好麻烦的更多相关文章

  1. (转)[BetterExplained]为什么你应该(从现在开始就)写博客

    (一)为什么你应该(从现在开始就)写博客 用一句话来说就是,写一个博客有很多好处,却没有任何明显的坏处.(阿灵顿的情况属于例外,而非常态,就像不能拿抽烟活到一百岁的英国老太太的个例来反驳抽烟对健康的极 ...

  2. 首个写博客的Android任务

    任务1 单击按钮图片选择器 使用TextView,RadioGroup,RadioButton完成. 设置单击按钮选择显示花朵. 首先设置了页面布局 <LinearLayout xmlns:an ...

  3. 用markdown写博客

    目录 用markdown写博客 前言 标题 段落 引用区块 代码块 列表 分隔线 链接 强调.加粗.下划线.删除线 图片 智能链接 表格 转义序列 用markdown写博客 前言 博客园支持用mark ...

  4. [BetterExplained]为什么你应该(从现在开始就)写博客

    (一)为什么你应该(从现在开始就)写博客 用一句话来说就是,写一个博客有很多好处,却没有任何明显的坏处.(阿灵顿的情况属于例外,而非常态,就像不能拿抽烟活到一百岁的英国老太太的个例来反驳抽烟对健康的极 ...

  5. word 写博客,直接上传

    目前大部分的博客作者在用Word写博客这件事情上都会遇到以下3个痛点: 1.所有博客平台关闭了文档发布接口,用户无法使用Word,Windows Live Writer等工具来发布博客.使用Word写 ...

  6. 使用word写博客

    目前大部分的博客作者在写博客这件事情上都会遇到以下3个痛点:1.所有博客平台关闭了文档发布接口,用户无法使用Word,Windows Live Writer等工具来发布博客.2.发布到博客或公众号平台 ...

  7. 在word上写博客直接发到CSDN

    目前大部分的博客作者在写博客这件事情上都会遇到以下3个痛点:1.所有博客平台关闭了文档发布接口,用户无法使用Word,Windows Live Writer等工具来发布博客.2.发布到博客或公众号平台 ...

  8. 在word上写博客直接发到CSDN博客

    目前大部分的博客作者在写博客这件事情上都会遇到以下3个痛点:1.所有博客平台关闭了文档发布接口,用户无法使用Word,Windows Live Writer等工具来发布博客.2.发布到博客或公众号平台 ...

  9. word写博客

    虽然很多博客已经可以直接粘贴图片了但是如果图片比较多的话还是会很麻烦的.如果文章中只有一张图片那还好说,直接使用CSDN提供的编辑器粘贴就完了.但是我们的文档中一般图片都是多于1张的,经常是10张.如 ...

随机推荐

  1. BUUCTF 梅花香自苦寒来

    梅花香自苦寒来 打开图片可以看到,在jpg后面有大量的数据,将它保存出来,可以看出是十六进制,将它转为ascii,写脚本 with open('hex.txt','r') as h: h=h.read ...

  2. Codeforces Paths and Trees

    Paths and Trees time limit per test3 seconds memory limit per test256 megabytes Little girl Susie ac ...

  3. Python之实现迭代器协议

    什么是迭代器: --迭代器(迭代就是循环) 可以被next()函数调用并不断返回下一个值的对象称为迭代器:Iterator 可迭代对象有: 一类是集合数据类型,如list,tuple,dict,set ...

  4. React-Native实战项目-导航器篇(一)

    前言:官方文档已经看了一遍,但印象不是很深,于是在mooc上找了个实战学习项目做一做. 本篇目录: 基础导航练习√ 1.ReactNavigation之createStackNavigator导航器案 ...

  5. 关于 ioctl 函数

    ioctl函数是用于控制的设备的接口 1.底层: long (*unlocked_ioctl) (struct file *filp, unsigned int cmd, unsigned long ...

  6. 一、Gulp

    开发和部署前端项目: 在开发Web应用中为加速客户端资源响应(js和css),减少对js和css的请求,通过bundles来实现. 在ASP.NET5中放弃该特性,被其他类似的组件所代替.比如使用Gu ...

  7. linux 系统管理--进程管理

    目录 linux 系统管理--进程管理 一.进程基本概述 二.监控进程状态 三.进程的优先级[进阶] 四.企业案例,Linux假死是怎么回事 五.后台进程管理 六.系统平均负载[进阶] linux 系 ...

  8. 链接socket加异常

    try { channel = AmqpClient::Channel::Create("10.10.22.105", 5672, "admin", " ...

  9. 【leetcode】sudokuSolver数独解题

    0.摘要 小时候在报纸上玩过数独,那时候觉得很难,前几天在leetcode上遇到了这个题,挺有意思于是记录下来 一般一道数独题,就像他给的例子这样,9*9的格子,满足 行,列 ,宫均取1-9的数,切互 ...

  10. 使用KEIL C51实现的简单合作式多任务操作系统内核(单片机实现版本)

    基于网上网友的代码,自己在单片机上实现, 特此记录分享之. 基于https://blog.csdn.net/yyx112358/article/details/78877523 //使用KEIL C5 ...