- 博客(13)
- 收藏
- 关注
RSS订阅原创 css背景色渐变之线性渐变和径向渐变的具体用法
渐变？：背景色在多个颜色之间平稳过渡线性渐变:从一个方向到另一个方向到另一个方向的颜色的变化线性渐变如图所示：标准模式的语法（不添加浏览器前缀）：background:linear-gradient(direction,color-stop1,color-stop2)说明：direction默认值是to bottom，即从上往下stop:颜色的分布位置，默认均匀分布（平均分布）兼容模式的语法（添加浏览器前缀）：background:-webkit-linear-gradi
2020-07-15 18:05:01
2070
1
原创 html-表格和表单（详细讲解）
下面将介绍如何玩转各种表格和表单：表格的作用：展示数据（尽量不做页面布局）表格的属性：width、height、border、bordercolorcellspacing=“ ” 清除单元格边框的间距cellpadding="" 内容距离边框之间的边距align="" 水平对齐方式valign="" 垂直对齐方式 topbottommiddle合并单元格：合并行：rowspan合并列: colspan注：合并都是合并 td表格重点属性： ...
2020-07-15 18:04:23
1256
1
原创 css怪异盒模型和弹性盒布局(flex)详解及其案例
一、怪异盒模型怪异盒模型的属性是box-sizing，他有两个属性值：1、content-box 这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。 简而言之就是，一般的盒子都是属于这种，最显著的特点就是加上padding后，盒子会被撑大，需要减去对应的高度或宽度。2、border-box 为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从
2020-07-15 18:02:28
938
原创 css浮动产生的高度坍塌以及解决高度坍塌的多种方法
css浮动产生的高度坍塌以及解决高度坍塌的多种方法(1)给元素添加overflow:hidden;原理：触发BFC；弊端：overflow:hidden;还有一个作用就是超出隐藏， 会隐藏掉元素内部定位的元素外部区域 具体实现代码如下：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="...
2020-07-14 21:01:56
425
原创 css盒模型margin,padding详解及用法
盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间。即都包含内容区、补白（填充）、边框、边界(外边距)这就是盒模型。换句话说，盒模型就如同一个房子，除了内部的货物以外，内部的其他空间就相当于接下来要介绍的padding属性；房子的墙壁就相对于border属性；房屋院子就相当于margin属性；房屋占地面积=内部货物+内部其他空间+墙壁宽度+院子面积。综上所述，盒模型的总大小=内部元素+paddi.
2020-07-14 21:00:08
1297
原创 html+css二级导航的实现
效果图如下（鼠标放置显示二级导航）：先使用浮动和盒模型完成页面布局，再使用定位使二级导航不占据空间，不影响下面轮播图的布局，具体代码如下：<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0">...
2020-07-14 20:52:03
1045
1
原创 html+css实现图片或元素的垂直、水平同时居中的多种方法(定位)
实现元素或图片的上下、左右居中的三种方法效果图如下：方法一：利用vertical-align属性实现图片上下居中先设置父元素样式text-align: center，实现图片左右居中，给图片添加一个同级的span标签，设置宽度为零，高度100%，两者都设置display: inline-block;vertical-align: middle，即可实现图片上下居中，具体代码如下：<!DOCTYPE html><html lang="en"><hea.
2020-07-14 20:49:51
725
1
原创 css元素类型以及类型之间的转换
元素类型分类块状元素、内联元素（行内元素）、可变元素注：行内块元素归在内联元素这一类里面默认情况下元素类型每个特点：块状元素特点：1、在页面以矩形区域显示。2、自上而下排列，独占一行。3、可直接加宽高4、一般情况下，作为其他元素或内容的容器内联元素特点:1、在页面中最小单位也是矩形2、在一行内逐个排列3、不可以直接添加宽高，大小有内容撑开4、内联元素也符合盒模型的规则，但个别属性会出现问题5、内联元素在一行可变元素（了解）button标签典型的
2020-07-13 16:36:36
292
原创 css文本（超出）溢出显示省略号
效果图如下：文本超出才会显示省略号overflowvisible:默认值，内容不会被修剪，会呈现在元素框之外；hidden：内容会被修剪，并且其余内容是不可见的；scroll：内容会被修剪，但是浏览器会显示滚动条，以便查看其余的内容;auto：如果内容被修剪，则浏览器会显示滚动条，以便查看其他的内容;white-spacenormal：默认值，多余空白会被浏览器忽略只保留一个；pre：空白会被浏览器保留；pre-wrap：保留一部分空白符序列，但是正常的进行换行；pre-li
2020-07-13 16:34:50
575
原创 用css实现一个三角形
效果图如下：边框样式实现一个三角形，具体代码如下：<!DOCTYPE html><html lang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>css实现三角形</title><s...
2020-07-13 16:33:45
262
原创 css 外部样式link和@import区别及用法
引入方式：<style> <linkrel="stylesheet"href="./css/style.css"></style><style> @import url(style.css)</style>link 和 @import 区别： 1.本质区别：link属于html一个标签@import 属于css提供的一个方法 2.加载顺序link导入的css和html结构同时加载@imp...
2020-07-13 16:31:34
191
原创 css选择符权重,css层叠性
选择符的权重问题：内联样式表(1000)>id选择符(100)>class选择符(10)>标签选择符(1)伪类选择器权重为10包含选择符权重等于权重之和eg:#box div{} 100+1=101群组选择符权重是不会发生变化的，保持原来的权重值!important权重最高css层叠性？：权重！！！产生权重关系，必然体现css得层叠性。0、！important最重要的样式1、内联>内部/外部，内部和外部与书写顺序有关2、选择符权重：id>.
2020-07-04 15:35:33
148
1
原创 css3-伪类选择器(符）、伪元素详解
CSS3选择符属性选择器 1、E[attr]：只使用属性名，但没有确定任何属性值2、E[attr=“value”]：指定属性名，并指定了该属性的属性值3、E[attr~=“value”]：指定属性名，并且具有属性值，此属性值是一个词列表，并且以空格隔开，其中词列表中包含了一个value词，而且等号前面的“〜”必须的4、E[attr^=“value”]：指定了属性名，并且有属性值，属性值是以value开头的5、E[attr$=“value”]：指定了属性名，并且有属性值，而且属性值是以value
2020-07-04 15:32:39
585
1
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人