摘要:
伸缩布局:在可伸缩的容器里设置 第一个属性(必须设置)-- display:flex; 1.默认情况下如果伸缩容器的一行放不下所有的伸缩项,那么系统会自动等比压缩所有的伸缩项。 2.在伸缩容器中有一个叫做flex-wrap属性,专门用于控制放不下是否需要换行的,默认取值:flex-wrap 不换行/ 阅读全文
摘要:
border-XX-XX-radius1.可以通过 border-XX-XX-radius的方式单独设置某一个角的值2.border-XX-XX-radius接收两个参数,第一个表示水平方向,第二个垂直方向3.例如:border-top-left-radius:50% 技巧:在企业开发中推荐使用如下 阅读全文
摘要:
背景尺寸属性 background-size:宽度 高度; 1.想要图片等比拉伸宽度或者高度 auto 2.想要图片等比拉伸并且宽度高度都填满整个元素 cover 3.想要图片等比拉伸并且宽度高度或填满整个元素 contain 背景图片定位区域属性,告诉系统图片从什么区域开始显示:backgroun 阅读全文
摘要:
2D转换模块(transform) 1.取值:rotate(45deg)--- 旋转,默认以自己为中心作为参考点来旋转 、translate(100px,0px)--- 平移,第一个参数代表水平方向,第二个是垂直方向、scale(1.5,1.5)--- 缩放,第一个参数代表水平方向,第二个是垂直方向,1代表正常,大于1代表放大,小于1代表缩小,如果两个值一样,可以缩写成scale(1.5)... 阅读全文
摘要:
a标签的伪类选择器 1.什么是a标签的伪类选择器?a标签的伪类选择器是专门用来修改a标签不同状态的样式的。 2.格式: 1):link 修改从未被访问过状态下的样式。 2):visited 修改被访问过的状态下的样式。 3):active 修改鼠标长按状态下的样式。 4):hover 修改鼠标悬停在a标签上状态下的样式。 3.注意点: 1)a标签的伪类选择器可以单独出现也可... 阅读全文
摘要:
相对定位(position:relative)1.什么是相对定位?相对定位就是相对于自己以前在标准流中的位置来移动。2.注意点:2.1)相对定位是不脱离标准流的,会继续在标准流中占用一份空间。相对定位需要配合top、bottom、left、right来使用。2.2)在相对定位中同一个方向上的定位属性 阅读全文
摘要:
1.企业开发中什么时候使用标准流什么时候使用浮动流? 垂直方向使用标准流,水平方向使用浮动流。 2.拿到一个很复杂的界面如何入手? 从上至下布局、从外到内布局、水平方向可以先划分为一左一右再对左边或者右边进行进一步的布局。 3.在标准流中内容的高度可以撑起父元素的高度,但是在浮动流中浮动的元素是不可 阅读全文
摘要:
盒子居中和文字居中 1.设置盒子中存储的文字/图片水平居中:text-align:center; 2.让盒子自己水平居中:margin:0 auto; 清空默认边距 1.为什么要清空默认边距(外边距和内边距)? 在企业开发中为了更好的控制盒子的宽高和计算盒子的宽高等等,所以在企业开发中,编写代码之前第一件事就是清空默认的边距。 2.如何清空? 格式:* { margin:0;padd... 阅读全文
摘要:
1.边框属性的格式:border:边框的宽度 样式 颜色; 2.连写的格式: 2.1)按照方向:border-top(right、left、bottom): ; 2.2)按照属性同时设置四条边:border-width(style、color):; > 取值规律是按照上右下左来赋值的。 3.注意点: 阅读全文
摘要:
1.在CSS中有个叫做background-image:url();的属性,就是专门用于设置背景图片的。 2.注意点: 1)图片的地址必须放在url()中,图片的地址可以是本地的地址,也可以是网络的地址。 2)如果图片的大小没有标签的大小大,那么会自动在水平和垂直方向平铺和填充。 3)如果网页上出现 阅读全文