随笔分类 -  html

【float】与【position】汇总
摘要：代码示例： 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>三列布局:左右固定列宽，中间列自适应</title> 6 <style> 7 .float-left{ 8 background 阅读全文
posted @ 2018-06-29 16:13 一分耕耘，一分收获 阅读(151) 评论(0) 推荐(0)
【CSS】定义元素的对齐方式
摘要：1、文本内容居中对齐:text-align。扩展用法：父元素嵌套子元素时，且子元素的宽度小于父元素宽度，使用text-align:center，可以实现子元素的居中对齐。 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="U 阅读全文
posted @ 2018-06-29 16:12 一分耕耘，一分收获 阅读(668) 评论(0) 推荐(0)
【CSS】元素样式
摘要：1、使用CSS的三种方式: 方式一、通过元素的style属性来设置元素的样式 方式二、在HTML头部标签<head>中通过<link>标签引入一个外部的CSS资源，通常是一个CSS文件。 方式三、在HTML头部标签<head>中通过一对标签<style></style>来定义元素的样式 1 <!DO 阅读全文
posted @ 2018-06-29 16:09 一分耕耘，一分收获 阅读(480) 评论(0) 推荐(0)
【CSS】绝对定位和相对定位
摘要：html:定位层 特点: >>完全脱离默认文档流，独立于立体层面的Z轴之上。 >>和float浮动一样都脱离了默认文档流，但float元素与默认文档流之间会相互产生影响，而定位层元素则完全独立，互不干扰 >>让元素inline-block化 >>例如一个div标签默认宽度是100%显示的，但是一旦变 阅读全文
posted @ 2018-06-21 18:11 一分耕耘，一分收获 阅读(253) 评论(0) 推荐(0)
【CSS】盒子模型的计算
摘要：1、标准盒子的尺寸计算 盒子自身的尺寸:内容的宽高+两侧内边距+两侧边框 盒子在页面中占位的尺寸:内容的宽高+两侧内边距+两侧边框+两侧外边距 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <titl 阅读全文
posted @ 2018-06-20 18:29 一分耕耘，一分收获 阅读(3254) 评论(0) 推荐(0)
【CSS】clear清除浮动
摘要：clear清除浮动1、作用: 规定元素的某一侧不允许存在浮动元素 2、值: 3、应用: 清除其他浮动元素对其产生的影响 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>清除浮动的应用</t 阅读全文
posted @ 2018-06-20 18:29 一分耕耘，一分收获 阅读(397) 评论(0) 推荐(0)
【CSS】定义元素的位置
摘要：CSS定义元素的位置html元素的position属性，有4个属性值，分别是static、relative、fixed、absolute static: 1、默认值，一般不显式设置为static 2、即使设置top、bottom、left、right，元素的位置不会发生改变 3、会随着页面滚动条移动 阅读全文
posted @ 2018-06-16 23:14 一分耕耘，一分收获 阅读(1964) 评论(0) 推荐(0)