Differences

This shows you the differences between two versions of the page.

--- devwiki:css [2021/09/15 07:52] – [CSS language structure] ying
+++ devwiki:css [2023/06/22 08:23] – [flex layout for elements] ying
@@ Line 25: / Line 25: @@
 Learn css property by demo:
   * [[http://www.w3schools.com/cssref/playit.asp?filename=playcss_display&preval=none|display: inline; block; list-item; none;]]
-  * display: none/inline/block/inline-block example: https://quirksmode.org/css/css2/display.html
+  * display: none/inline/block/inline-block example: https://stackoverflow.com/questions/3099030/displayinline-vs-displayblock
+    * examples of block level elements include: div, h1, p, and hr
+    * (takes the entire row(100%)of the screen ,it is always 100%of the screen size)
+    * examples of inline level elements include: a, span, strong, em, b, and i, canvas
 ====== The Selectors ======
   - Class
@@ Line 129: / Line 132: @@
 }
 </code>
+===== flex layout for elements =====
+  * https://css-tricks.com/almanac/properties/j/justify-content/
+  * https://www.w3docs.com/learn-css/the-ultimate-guide-to-flexbox.html
+  * https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Typical_use_cases_of_flexbox
+  * https://stackoverflow.com/questions/33192745/center-align-container-and-left-align-child-elements?noredirect=1&lq=1
+  * https://stackoverflow.com/questions/32802202/how-to-center-a-flex-container-but-left-align-flex-items
 ===== Page Layout =====
@@ Line 231: / Line 243: @@
 TD{font-family: Arial; font-size: 8pt;}
+</code>
+===== text background color bar strike through =====
+  * gradient method
+    * gradient tool: https://cssgradient.io/
+    * <code>
+// gradient with half transparent way to half BG
+<p><span='colorHalfBG'>Text</span></p>
+span.colorHalfBG{
+  padding-left: 5px;
+  padding-right: 5px;
+  background: linear-gradient(0deg, rgba(241,90,34,1) 0%, rgba(241,90,34,1) 50%, rgba(241,90,34,0) 50%);
+}
+</code>
+  * :before in absolute position to draw a block behind method
+    * ref: https://codepen.io/OxyDesign/pen/eHAac
+    * <code>
+.colorHalfBG:before {
+  display: block;
+  content:'';
+  position:absolute;
+  width:100%;
+  bottom:0;
+  left:0;
+  background:#f66;
+  z-index:-1;
+  height:50%;
+}
 </code>
 ===== Real CSS tricks =====