- 博客(32)
- 收藏
- 关注
RSS订阅原创 溢出的文字省略号显示
首先设置white-space,强制一行显示.white-space:normal ；默认处理方式white-space:nowrap ； 强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。超出的部分隐藏 overflow: hidden;text-overflow 文字溢出设置或检索是否使用一个省略标记（…）标示对象内文本的溢出text-ov...
2019-10-25 20:00:49
241
原创 vertical-align垂直对齐
有宽度的块级元素居中对齐是margin:0 auto;文字对齐是text-align:center;vertical-align垂直对齐,只针对行内元素或者行内块元素.通过vertical-align 控制图片和文字的垂直关系,默认的图片会和文字基线对齐.vertical-align:baseline 基线|| top 顶部||middle垂直居中||bottom底部应用场景,图片...
2019-10-25 19:57:03
288
原创 轮廓线--禁止文本域拖拽
轮廓线是绘制于元素周围的一条线,位于边框边缘的外围,可起到突出元素的作用.outline: outline-color ||outline-style||outline-width常用的写法:outline:0;或者 outline:none; 来清除轮廓线样式.禁止文本域拖拽开发过程中,一般文本域都是禁止拖拽的.resize:none;...
2019-10-25 19:51:28
386
原创 鼠标样式cursor
设置鼠标指针采用何种系统预定义的光标图形.属性值描述default默认pointer小手move移动text文本not-allowed禁止
2019-10-25 19:46:14
106
原创 元素的显示与隐藏
1. 使用display显示display:none 隐藏对象.display:block 除了转换层块级元素,同时还有显示元素的意思.特点: 隐藏后不再保留位置,多用于下拉菜单.2. visibility可见性visibility:visible 对象可视visibility:hidden 对象隐藏特点:隐藏后保留位置(停薪留职),3. overflow 溢出...
2019-10-25 19:43:43
257
原创 使用定位position实现元素居中
在使用绝对定位时要想实现水平居中，可以按照下图的方法：left: 50%;：让盒子的左侧移动到父级元素的水平中心位置；margin-left: -100px;：让盒子向左移动自身宽度的一半。垂直居中同上...
2019-10-24 09:18:29
4339
2
原创 定位(position)
为什么使用定位让子元素移动，吸引用户的眼球。当我们滚动窗口的时候，盒子是固定屏幕某个位置的将盒子定在某一个位置 自由的漂浮在其他盒子(包括标准流和浮动)的上面定位 = 定位模式 + 边偏移(属性定义元素的边偏移：（方位名词）)静态定位(static)静态定位是元素的默认定位方式，无定位的意思。它相当于 border 里面的none， 不要定位的时候用。静态定位 按照标准流特性...
2019-10-24 09:16:14
152
原创 使用Chrome的开发者工具
基本的结构布局是左边html 右边是 csschrome调试数值可以鼠标点击后面的数值， 按下键盘 上箭头 是 调大 数值， 下箭头是 调小数值Chrome提示的常见布局错误css无显示声明类名和html调用名不一致 或者 css文件引入不对 或者 这个样式的前面 多余了一些符号影响的tml 结构不匹配(重要)通过颜色判断盒子蓝色是 盒子的 宽度高度 青色...
2019-10-24 09:04:34
131
原创 清除浮动
为什么要清除浮动因为父级盒子很多情况下，不方便给高度，但是子盒子浮动就不占有位置，最后父级盒子高度为0，就影响了下面的标准流盒子。由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响准确地说，并不是清除浮动，而是清除浮动后造成的影响清除浮动本质清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。清除浮动之后，父级就会根据浮动的子盒子自动检测高度。...
2019-10-21 15:04:11
87
原创 浮动(float)
CSS 布局的三种机制CSS 提供了 3 种机制来设置盒子的摆放位置，分别是普通流（标准流）、浮动和定位，其中：普通流（标准流）块级元素会独占一行，从上向下顺序排列；常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行；常用元素：span、a、i、em等浮动让盒子从普通流...
2019-10-21 14:59:14
139
原创 圆角边框和盒子阴影
圆角边框border-radius:length; 其中每一个值可以为 数值或百分比的形式。技巧： 让一个正方形 变成圆圈盒子阴影box-shadow:水平阴影 垂直阴影 模糊距离（虚实） 阴影尺寸（影子大小） 阴影颜色 内/外阴影；- 前两个属性是必须写的。其余的可以省略。- 外阴影 (outset) 是默认的 但是不能写 想要内阴影可以写 ...
2019-10-21 14:51:29
165
原创 嵌套块元素垂直外边距的合并（塌陷）
对于两个嵌套关系的块元素，如果父元素没有上内边距及边框父元素的上外边距会与子元素的上外边距发生合并合并后的外边距为两者中的较大者解决方案：可以为父元素定义上边框。可以为父元素定义上内边距可以为父元素添加overflow:hidden。...
2019-10-21 14:43:06
804
原创 外边距合并
使用margin定义块元素的垂直外边距时，可能会出现外边距的合并。相邻块元素垂直外边距的合并当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和取两个值中的较大者这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）。解决方案：尽量...
2019-10-21 14:41:04
426
2
原创 盒子模型（Box Model）
所谓盒子模型：就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。盒子模型有元素的内容、边框（border）、内边距（padding）、和外边距（margin）组成。盒子里面的文字和图片等元素是 内容区域盒子的厚度 我们成为 盒子的边框盒子内容与边框的距离是内边距（类似单元格的 cellpadding)盒子与盒子之间的距离是外边距（类似单元格的 cells...
2019-10-21 14:39:15
1685
1
原创 CSS 三大特性
CSS层叠性概念：所谓层叠性是指多种CSS样式的叠加。是浏览器处理冲突的一个能力,如果一个属性通过两个相同选择器设置到同一个元素上，那么这个时候一个属性就会将另一个属性层叠掉原则：样式冲突，遵循的原则是就近原则。 那个样式离着结构近，就执行那个样式。样式不冲突，不会层叠CSS继承性概念：子标签会继承父标签的某些样式，如文本颜色和字号。想要设置一个可继承的属性，只需将...
2019-10-21 14:27:36
165
原创 CSS 背景(background)
背景颜色(color)background-color:颜色值; 默认的值是 transparent 透明的背景图片(image)background-image : none | url (url) 小技巧： 提倡 背景图片后面的地址，url不要加引号。背景平铺（repeat）background-repeat : repeat 背景图像在纵向和横向上平铺（默认的） |...
2019-10-21 14:11:47
760
原创 标签显示模式（display）
什么是标签显示模式标签以什么样方式进行显示，比如div 自己占一行， 比如span 一行可以放很多个标签的类型(分类)HTML标签一般分为块标签和行内标签两种类型，它们也称块元素和行内元素。块级元素(block-level)常见的块元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li&...
2019-10-21 13:45:32
241
原创 css复合选择器
后代选择器概念： 后代选择器又称为包含选择器作用： 用来选择元素或元素组的子孙后代其写法就是把外层标签写在前面，内层标签写在后面，中间用空格分隔，先写父亲爷爷，在写儿子孙子。.class h3{color:red;font-size:16px;}子元素选择器- 作用： 子元素选择器只能选择作为某元素子元素(亲儿子)的元素。- 其写法就是把父级标签写在前面，子级标...
2019-10-21 13:39:24
157
原创 CSS字体样式属性
font字体1. font-size:大小p {font-size:20px; } 单位：可以使用相对长度单位，也可以使用绝对长度单位。相对长度单位比较常用，推荐使用像素单位px，绝对长度单位使用较少。2. font-family:字体p{ font-family:“微软雅黑”;}网页中常用的字体有宋体、微软雅黑、黑体等，例如将网页中所有段落文本的字体设置为微软雅黑...
2019-10-20 19:46:15
310
原创 CSS选择器
CSS选择器干啥的？ 选择标签用的， 把我们想要的标签选择出来CSS基础选择器标签名{属性1:属性值1; 属性2:属性值2; 属性3:属性值3; } 作用： 标签选择器 可以把某一类标签全部选择出来 比如所有的div标签 和 所有的 span标签优点： 是能快速为页面中同类型的标签统一样式缺点： 不能设计差异化样式。类选择器.类名 { ...
2019-10-20 19:11:09
164
原创 引入CSS样式表（书写位置）
1. 行内式（内联样式）<标签名 style="属性1:属性值1; 属性2:属性值2; 属性3:属性值3;"> 内容 </标签名>注意：style其实就是标签的属性样式属性和值中间是:多组属性值之间用;隔开。只能控制当前的标签和以及嵌套在其中的字标签，造成代码冗余缺点：没有实现样式和结构相分离2.内部样式表（内嵌样式表）<he...
2019-10-20 19:03:06
206
原创 form表单域和表单标签
form表单域在HTML中，form标签被用于定义表单域，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。<form action="url地址" method="提交方式" name="表单名称"> 各种表单控件</form>input 控件<input type="属性值" value="你好">textarea控件...
2019-10-20 18:58:22
1113
原创 列表标签
无序列表 ul <ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> ...... </ul>有序列表 ol<ol> <li>列表项1</li> <li>...
2019-10-20 18:47:19
90
原创 创建表格
在HTML网页中，要想创建表格，就需要使用表格相关的标签。<table> <tr> <td>单元格内的文字</td> ... </tr> ...</table>table用于定义一个表格标签。tr标签 用于定义表格中的行，必须嵌套在 table标签中。td 用于定义表格中的单元格，必须...
2019-10-20 18:40:07
472
原创 什么是XHTML? HTML和 XHTML之间有什么区别?
什么是XHTMLXHTML 指可扩展超文本标签语言（EXtensible HyperText Markup Language）。XHTML 的目标是取代 HTML。XHTML 与 HTML 4.01 几乎是相同的。XHTML 是更严格更纯净的 HTML 版本。XHTML 是作为一种 XML 应用被重新定义的 HTML。XHTML 是一个 W3C 标准。HTML和 XHTML之间有...
2019-10-19 22:37:45
941
原创 base 标签,pre标签,和特殊字符
<base target="_blank" />base 可以设置整体链接的打开状态base 写到 之间把所有的连接 都默认添加 target="_blank"预格式化文本pre标签<pre> 标签可定义预格式化的文本。被包围在 <pre> 标签 元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体。特殊字符...
2019-10-19 22:36:13
433
原创 image和a标签及路径
<img src="图像URL" />图像标签那个属性是必须要写的？ img src 图片的路径图像标签中 alt 和 title 属性区别？ alt 图片显示不出，文字就显示 title 鼠标经过图片的时候显示文字单词缩写： anchor 的缩写 [ˈæŋkə®] 。基本解释 锚, 铁锚 的在HTML中创建超链接非常简单，只需用标签把文字包括起来就好...
2019-10-19 22:23:21
1704
原创 HTML常用标签
HTML常用标签1.排版标签标题标签<h></h>段落标签<p></p>水平线标签<hr />换行标签<br />div 和 span标签<div></div> <span></span>2. 文本格式化标签标签显示效果<b>...
2019-10-19 22:11:48
96
原创 文档类型DOCTYPE和页面语言lang及字符集
<!DOCTYPE> 声明位于文档中的最前面的位置，处于 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。 指定该html标签 内容 所用的语言为中文简单来说，可能对于程序来说没有太大的作用，但是它可以告诉浏览器，搜索引擎，一些处理Html的程序对页面语言内容来做一些对应的处理或者事情。- 根据根据lang属性来设定不同语言的css样式，...
2019-10-18 22:10:36
191
原创 HTML元素标签分类
HTML元素标签分类常规元素（双标签)该语法中“<标签名>”表示该标签的作用开始，一般称为“开始标签（start tag）”，“</标签名>” 表示该标签的作用结束，一般称为“结束标签（end tag）”。和开始标签相比，结束标签只是在前面加了一个关闭符“/”。空元素（单标签)空元素 用单标签来表示， 简单点说，就是里面不需要包含内容， 只有一个开始标...
2019-10-18 22:05:06
161
原创 Web 标准构成
标准说明备注结构结构用于对网页元素进行整理和分类，主要是HTML。表现表现用于设置网页元素的版式、颜色、大小等外观样式，主要指的是CSS行为行为是指网页模型的定义及交互的编写，主要是 Javascript理想状态我们的源码： .HTML .css .jsweb标准小结web标准有三层结构，分别是结构（html）、表现...
2019-10-18 22:00:45
1239
原创 常见浏览器内核
浏览器内核备注IETridentIE、猎豹安全、360极速浏览器、百度浏览器firefoxGecko可惜这几年已经没落了，打开速度慢、升级频繁、猪一样的队友flash、神一样的对手chrome。Safariwebkit现在很多人错误地把 webkit 叫做 chrome内核（即使 chrome内核已经是 blink 了）。苹果感觉像被别人抢了媳妇，都哭...
2019-10-18 21:50:45
89
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人