CSS
coder-lxy
这个作者很懒,什么都没留下…
展开
-
flex布局
flex布局两个概念:1.开启了flex布局的元素叫 flex container2.flex container 里面的直接子元素叫做 flex items3.开启flex布局: display: flex / inline-flexflex:flex container 以block-level形式存在inline-flex:flex container 以inline-leve...原创 2020-05-12 17:12:51 · 148 阅读 · 0 评论 -
CSS—表单的样式设置
input常用属性type:input的类型text:文本输入框(明文输入)password:文本输入框(密文输入)radio:单选框checkbox:复选框button:按钮reset:重置submit:提交表单数据给服务器file:文件上传maxlength:允许输入的最大字数placeholder:占位文字readonly:只读属性disab...原创 2020-04-03 16:29:16 · 3210 阅读 · 0 评论 -
CSS设置圆角边框
在CSS3 中,新增了圆角边框的样式,可以使盒子变成圆角。原理:(椭)圆与边框相切形成圆角效果,长度越大,圆角角度越大语法border-radius:length;参数值可以设置为数值或百分比的形式如果是正方形,想要设置为一个圆,把数值改为高度或者宽度的一半即可,或者直接写50%如果是个矩形,设置为高度的一半就是圆角矩形。该属性是一个简写属性,可以设置四个值,分别代...原创 2020-04-03 15:50:01 · 809 阅读 · 0 评论 -
元素的显示与隐藏
1. 元素的显示与隐藏1.1 display 属性display属性用于设置一个元素应当如何显示。display:none; 隐藏对象display:block; 除了转换为块级元素之外,同时还有显示元素的意display隐藏元素后,不再占有原来的位置。(会搭配js做很多网页特效)1.2 visibilityvisibility属性用于指定一个元素应该可见还是隐藏。visi...原创 2020-04-03 15:41:14 · 100 阅读 · 0 评论 -
引入CSS的三种方式
CSS的基本使用内联(行内)样式:inline style使用 style=“属性名:属性值; 属性名:属性值;”<h1 style="font-size:50px;color:red;">网页的标题</h1>文档样式表:document style sheet选择器 {属性名:属性值;}开发网页特性:结构和样式分离<style> ...原创 2020-02-09 16:24:51 · 168 阅读 · 0 评论 -
页面布局三大核心(三)—定位(position)
1.定位1.1 为什么需要定位提问:以下情况使用标准流或者浮动能实现吗?某个元素可以自由的在一个盒子内移动位置,并且压住其他的盒子。以上效果,标准流或者浮动都无法快速实现,此时需要定位来实现。所以:浮动可以让多个块级盒子一行都没有缝隙排列显示,经常用于横向排列盒子。定位则是可以让盒子自由的在某个盒子内移动位置或者固定屏幕中的某个位置,并且可以压住其他盒子。1.2 定位组成定位...原创 2020-03-22 11:53:27 · 749 阅读 · 0 评论 -
页面布局三大核心(二)—浮动(float)
页面布局三大核心(二)——浮动(float)1. 传统网页布局的三种方式网页布局的本质——用CSS来摆放盒子。把盒子摆放到相应的位置。CSS 提供了三种传统布局方式:普通流(标准流)浮动定位2. 标准流(普通流/文档流)所谓的标准流:就是标签按照规定好的默认方式排列,标准流是最基本的布局方式块级元素会独占一行,从上向下顺序排列。行内元素会按照顺序从左到右顺序排列,碰到父元...原创 2020-03-16 17:32:36 · 530 阅读 · 0 评论 -
页面布局三大核心(一)—盒子模型
页面布局三大核心(一)-盒子模型HTML中的每一个元素都可以看作是一个盒子,如下图所示,可以具备这4个属性1. content相关属性width:设置宽度min-width:设置最小宽度,无论内容有多少,宽度都>=min-widthmax-width:设置最大宽度,无论内容有多少,宽度都<=max-widthheight:设置高度min-height:设置最小高度,无...原创 2020-03-15 17:40:34 · 701 阅读 · 0 评论 -
CSS的三大特性
CSS的三大特性1.层叠性层叠性主要解决样式冲突的问题层叠性原则:样式冲突,遵循就近原则,哪个样式离结构近就执行哪个样式(后写的会覆盖前面的)样式不冲突,不会层叠div { color: red; font-size: 12px;} div { color: pink;}/*color属性值层叠为pink,font-size不会层叠*/2.继承性子标...原创 2020-03-15 15:37:33 · 571 阅读 · 0 评论 -
CSS选择器
CSS 选择器1. CSS 基础选择器:1.1 统配选择器:*<style> /*选取页面中所有的元素(标签)*/ * { color: red; }</style>1.2 元素选择器(标签选择器)type selectors:<style> /*可以选出所有相同的标签*/ div { colo...原创 2020-03-15 11:16:47 · 107 阅读 · 0 评论